破壊用の地球を作りました
ストレスが頂点に達した時に、ワンクリックで地球を破壊できれば、ス～つと気持ちが安らぐと思うんですよね。ストレス発散用に地球を破壊できるサイトを作りました。
→ストレス発散用地球
地球の画像をクリックかタップすると、
こんなふうに爆発します。地球があった場所をクリックすると復活します。
ホントは粒子状に砕け散るエフェクトがいいんですが、ちょっとそこまでの気力とスキルがありませんでした…。誰かぜひ作ってください。
爆発のエフェクトには、jQueryUIのexplodeを使っています。砕けるピース数も指定ができます。
ソースを載せておきます。
HTML
<body>
<audio id="bomSound" preload="auto">
<source src="sound/bom.mp3" type="audio/mp3">
</audio>
<div id="space">
<div id="earth_area">
<div id="earth">
<img src="images/earth.png">
</div>
</div>
</div>
</body>爆発する箇所は、#earthの部分です。#earth_areaで囲むのはココをクリックすると地球が復活するようにするためです。Flexboxで画面中央に表示するために#spaceでさらに囲っています。
CSS
html, body {
height: 100%; //Flexboxで画面中央に地球画像を置くために必要
overflow: hidden;
}
body {
background-image: url(images/space.jpg);
background-repeat: repeat;
background-position: center center;
-webkit-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
#space {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#earth_area {
width: 300px;
height: 300px;
margin: 0 auto;
overflow: hidden;
}
#earth {
width: 300px;
}
#earth img {
width: 100%;
}JS
jQuery('#earth_area').on('click', function() {
jQuery('#bomSound').get(0).play();
jQuery('#earth').toggle('explode', {
pieces: 100
}, 1000);
});#earth_areaをクリックすると、音が出て、地球が爆発します。jQueryUIの爆発フェクトはtoggleメソッドにexplodeを指定します。piecesに砕ける数を設定します。1000はそのスピードですね。
このサイトでは、本当にWebデザインのスキルを磨きたいなら、未経験の方はまずはWeb制作会社に正社員で入社することを強くオススメしています。
Webの最先端に触れられるWeb制作会社に入社し、スキルをガッツリ高めてほしいです。そして、社内では、やはり派遣でもなく、アルバイトでもなく、長く在籍する可能性のある正社員にこそ成長できるお仕事を振ってくれるのです。派遣やアルバイトは、リンク張り替えやテキスト修正など成長しづらい作業をやらされがちです……。
未経験OKで正社員のWebデザイナー・フロントエンドエンジニア案件を多く保有しているのが、IT系に強い『ワークポート』と『Webist』の２つです。
※コロナもほぼ収まりつつありますが、まだワークポートもWebistですら未経験OKの求人が少ない状況です。ただ、少しでも選択肢を増やすために、また今後状況が改善されてきた時のために、ポートフォリオを制作後に登録しておきましょう。
エンジニアになるのは本当に難しいです。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。
でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。
ほとんどの人がエンジニアにはなれないので、50〜60万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。
どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『プログラマカレッジ』のようなスクールに行きましょう。プログラマカレッジは、学校＆就職支援の一体型サービスです。
他にも、PHPに特化した無料の『無料PHPスクール』もあります。PHPはがっつりプログラミングの言語である一方で、ECサイト構築やWordPressにも使われるWeb系と親和性が高い言語なので、Web系に進みたい人には無料PHPスクールはオススメです。23日間通学でけっこうハードなカリキュラムです。
この２つの学校のどれかに通って、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。無料見学をしてみて自分に合いそうな雰囲気の学校を選びましょう。20代のみ対象です。もし20代ならこのチャンスをぜひつかんでください。
「ポートフォリオを作ってみたけど不安...」「周りにレビューをしてくれる人がいない...」
そんなお悩みを解決するために、ポートフォリオのチェックリストを作りました！27,000文字以上の大ボリュームです笑。noteで販売中です。激安のワンコイン500円です。このチェックリストで改善点を見つけて、少しでもポートフォリオの質を上げて、自分が望む就職に繋げましょう！
ご質問や感想など、お気軽にどうぞ！