CodePenに隠された20の素晴らしいクリスマスプロジェクト
CodePenは才能のあるフロントエンド開発者のためのオンライン遊び場であり、あなたはあなたの視野を広げ、他の開発者が何をしているかを見るためにいつでもクールなプロジェクトを見つけることができます。年末年始の休日は、創造的な個人的なプロジェクトであなたの愛する人を驚かせる、または休日を元気づけるのに役立ついくつかのクールで最先端のデザインであなたの顧客に感謝を言う絶好の機会です.
この記事では、のぞき見をします。 CodePenでの20回の素晴らしいクリスマスの実験, あなたはあなた自身のデザインを作成するためのインスピレーションのために使用できること.
1.家族のクリスマスソングブック
この素敵な家族のクリスマスソングブックアプリはSoundCloudでホストされているあなたのお気に入りのクリスマスソングを再生することができます。スタイルルールはLESSスタイルシート言語で書かれており、ミュージックプレーヤーの機能はカスタムjQueryプラグインによって提供されます。.
背景にあるスノーフレークとクリスマスツリーのアイコンは、デザインに厳粛な雰囲気を与えます。ペンの上にマウスを置くと、微妙なCSS効果もあります。.
2.デジタルクリスマスツリー
その典型的な視覚的要素は多くの創造的な方法で構築することができるので、クリスマスのためのデザインは常にありがたい仕事です。このペンはこれの良い例です。最初は、休日とは無関係のカラフルな三角形しか表示されませんが、[公開]ボタンをクリックすると、クリスマスツリーにまとめられます。これはユニークな解決策であるだけでなく、より単純なゲームを彷彿とさせる.
3.降雪を伴うクリスマスアニメーション
クリスマス用に素敵なアニメーションを作成したい場合は、必ずしもJavaScriptを使用する必要はありません。このペンでは、降雪アニメーションと背景画像の両方が純粋にCSSで作成されています。 CSS3の素晴らしい機能を示しているので、コードを少し検討する価値があります。背景画像は実際のSVGグラフィックと間違えられることさえあります.
4.サンタ・オン・ザ・ラン!
実行時にサンタ！はphaser.js HTML5ゲームフレームワークを利用して休日のための楽しいJavaScriptゲームです。このゲームにはそれほど多くのルールはありません。Santaは無限に、あるいは少なくとも倒れるまで走ります。このペンはあなたにJavaScriptでより簡単なゲームを書く方法を理解する絶好の機会を与えます.
5.秘密のサンタの名前ピッカー
帽子から名前を選ぶことは秘密のサンタを選ぶために学校やオフィスで一般的な方法でした - このペンは単にこの伝統のデジタル版です。それはバニラJavaScriptだけを使用するので、あなたはあなた自身のサイトにそれを簡単に埋め込むことができます。 give変数内の名前を変更するだけです.
6.ピュアCSSのクリスマスボール
これらの陽気なクリスマスボールは、ボーダー半径のルールを利用して純粋なCSSで書かれています。ボールのさまざまな部分は、正確に計算された相対位置を利用してまとめられます。.
あなたがすぐにWebページに休日の雰囲気を追加したい場合は、単にサイトの全体的なデザインと一致する色で適切な場所にこれらのボールのいくつかを挿入してください.
7.可動スノーフレーク
あなたはこれらの雪をデスクトップの上に置くかスマートフォンを傾けることで動かすことができます。この機能は、開発者がカスタムSnowflakeクラスを作成するためにスマートに使用するオブジェクト指向のJavaScriptによって提供されます。.
雪片自体はCSS3で作られており、背景はグラデーションを使用しています - このペンにはまったく画像がありません.
8.ホリデーアコーディオン実験
この休日のアコーディオンはただ美しいです。タブの上にマウスを置くと少し拡大してフォーカスが移り、クリックすると突然ポップアップしてページ全体を覆います。このペンはCSSでスタイル付けされたScalable Vector Graphics（SVG）を使用していることに注目するのは興味深いです。.
SVGは一見したところよりも強力で、通常のHTML要素で使用しているのと同じスタイルルールでスマートに配置および設計できます。.
9.フラットピュアCSSスノーマン
フラットデザインは退屈である必要があると誰が言いましたか？この素敵な雪だるまは、どんなデザインにもクリスマスの精神を簡単に追加できます。雪だるまに使用される画像はありません、それは完全にCSSで書かれています。 CSSコードを少し見て、開発者が意図した結果を達成するために：beforeおよび：after疑似セレクタをどのように使用するかを見てみる価値があります。.
10. CSS3スノーフレーク
高度なフロントエンド開発ツールを使用すると、CSS3専用の画像を簡単に作成できます。このうまく設計されたCSS3スノーフレークはこれのためのすばらしい例です。開発者は、HTMLにコンパイルするJadeテンプレート言語と、この素晴らしいスノーフレークデザインを実装するためのSass CSSプリプロセッサを利用しました。.
11.クリスマスボタン
このペンの雪に覆われたクリスマスボタンのように、スマートなデザインはしばしば微妙な解決策を選びます。濃い赤の背景はクリスマスデザインに最適です。すべてがグリーンである必要はない.
色、グラデーション、書体、およびホバー効果により、このボタンは非常にエレガントで華やかになります。あなたはすぐにクリスマスのためにサイトを飾るためにそれらのうちのいくつかを必要とします.
12.パララックスハッピーホリデー
あなたが視差スクロールを好むならば、なぜあなたはあなたの休日のデザインのためにそれを使わないでしょうか？このペンの開発者はこの効果を巧みに実験し、あまり一般的ではない方法でParallax.js jQueryプラグインを使用しました。スクロール効果は通常のように垂直ではなく水平です。クリスマスの雰囲気は印象的な降雪によって強化されています
私がこのペンの欠陥を摘み取らなければならないならば、それは色の選択でしょう：部分的に白い背景の上の白い文字はデザインのアクセシビリティを著しく弱めます.
13. CSSクリスマスラッピングペーパー
あなたはCSS3の助けを借りて完全にユニークなクリスマスの包装紙を作成することができます。このペンの開発者は、このための1つだけでなく6つの変形を見せています。美しいパターンは、CSSグラデーションとbackground-blend-modeプロパティのスマートな利用によって達成されます。.
開発者自身のWebサイトで、さらにクールな例や詳細な説明を見つけることができます。.
14.箱の中の箱
この想像力豊かなデザインは、伝統的なロシアの人形（人形の中の人形）からインスピレーションを受けています。外側のボックスをクリックして開くと、内側のボックスが表示されます。これは、別の内側のボックスの外側のボックスでもあります。機能はjQueryで書かれており、ボックスの正確な位置はCSSファイルの絶対位置ルールと相対位置ルールを使用して設定されます。.
15.はがし効果付きギフトボックス
リボンをドラッグしてこのギフトからリボンを取り除くことができた場合は、ギフトの内部の内容を明らかにするスーパークールペーパーピール効果を見てみることができます。あなたは開発者のウェブサイトで完全なチュートリアルを読むことができます、それはそれが間違いなく学ぶ価値があるというトリックです。コードを使いたいだけなら、GitHubからもクローンできます。.
16.ホリデースピリットアニメーションキャンバス
開発者がHTML 5キャンバスをアニメーションの背景として使用してこのペンで試したように、クリスマスは新しいことを試すのに最適な時間です。キャンバスはHTMLファイル内のコンテンツ（Happy Holidays！）の前に配置され、スマートCSSの配置を使用して背景として設定されます。.
ペンは、別のJavaScriptファイルとして含まれているバックグラウンドアニメーションスクリプトも使用します。.
17.ギフトカードのUI
この人目を引くギフトカードはクリスマスだけでなく、あなたがあなたのウェブサイトのギフトであなたのユーザーを驚かせたい時はいつでも使うことができます。 Sassスタイルシート言語で書かれているため、JavaScriptには依存しません。.
このデザインでは、クリップパスのCSS3プロパティを使用しているため、開発者は領域全体を表示するのではなく、要素の特定の領域だけを表示できます。.
18.ピュアCSSメリークリスマスカード
この無限に笑うサンタ - HTMLとCSS3だけを使う - はあなたに実際にどのようにキーフレームアニメーション構文が使われることができるかを理解する機会を与えることができます。 CSS 3では、@ keyframesルールを使用してアニメーションのルールを指定し、次にそのアニメーションCSS 3プロパティを使用してこの指定されたアニメーションを特定の要素にバインドできます。.
開発者がこのペン用に作成したbodyLaugh、beardLaugh、headLaugh、およびmouthLaughというカスタムキーフレームを使用してこれを行ったように、アニメーションプロパティの最初の値としてキーフレームの名前を追加する必要があります。.
19.クリスマスクラッカー
この印象的なクリスマスクラッカーの上にカーソルを置くと、それはあなたの訪問者にメリークリスマスを望むための素晴らしい方法であるユニークなクリスマスメッセージを明らかにします。 HTMLはHAML、HTML抽象化マークアップ言語で書かれていますが、スタイルルールはSass Syntactically Awesome Styesheets言語の力を利用しています。.
結果は実にスマートで素晴らしいです。もう少しJavaScriptを追加することで、カスタムの引用符やメッセージをユーザーに配信するためにも使用できます。.
20.点滅するクリスマスライト
これらの点滅するクリスマスライトはすぐにどんなウェブサイトにも独特の雰囲気を与えます。フロントエンドのコードは、HTMLにコンパイルするHAML、CSSにコンパイルするSass、およびjQueryで書かれています。.
アニメーションの輝く効果は、CSS3が提供する前述の@keyframesルールによって実現されています。 LEDの色は、HSLカラースケールを使用して前のLEDの色相値に50度を加算することによってjQueryファイルに設定されます.
