Пример:
С наступающим Новым Годом !
Для движка InstantCMS на основе этой секции сделан хороший виджет - конструктор
HTML:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div class="scene"> <div class="falling"></div> <div class="message" data-depth="0.1"> С наступающим Новым Годом ! </div> <div class="background" data-depth="0.2"> <img src="winter.jpg" /> </div> <div class="snow back" data-depth="0.3"> <img src="snowyHills.png" /> </div> <div class="snow front" data-depth="0.5"> <img src="snowyHills2.png" /> </div> <div class="tree" data-depth="0.5"> <img src="christmasTree.png" /> </div> </div> |
Используемые картинки:
CSS:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
.scene { text-align: center; width: 100%; margin: 0; padding: 0; background: black; position: relative; overflow: hidden; line-height: 1.1; } .falling { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .background { margin-left: -10%; margin-top: -10%; width: 110%; } .background img { width: 110%; } .snow { width: 120%; } .snow.back { position: absolute; top: auto!important; bottom: -15%; margin-left: -15%; width: 130%; } .snow.front { position: absolute; top: auto!important; bottom: -25%; margin-left: -10%; width: 120%; } .snow img { width: 100%; } .tree { position: absolute; top: auto!important; bottom: 1%; width: 30%; margin-left: 30%; } .tree img { width: 100%; } .message { position: absolute; z-index: 20; margin-top: 5%; width: 40%; margin-left: 55%; text-align: center; font-weight: bold; color: #FFF; font-family: 'Roboto', sans-serif; text-transform: uppercase; animation: neon-1 .1s ease-in-out infinite alternate; } @keyframes neon-1 { from { text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(191, 226, 255, 0.52), 0 0 21px rgba(191, 226, 255, 0.92), 0 0 34px rgba(191, 226, 255, 0.78), 0 0 54px rgba(191, 226, 255, 0.92); } to { text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(191, 226, 255, 0.58), 0 0 22px rgba(191, 226, 255, 0.84), 0 0 38px rgba(191, 226, 255, 0.88), 0 0 60px #FFF; } } |
JS:
- Для параллакса подключаем библиотеку parallax.min.js, подробнее о ней описано в теме: "Параллакс-эффекты"
- Для падающих снежинок подключаем библиотеку sparticles.min.js, как в теме: "Секция с падающим снегом".
- Скачиваем снежинки и прописываем к ним пути в скрипте, который подключаем ниже библиотек и HTML кода.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 |
let scene = document.querySelector('.scene'); let parallaxInstance = new Parallax(scene, { clipRelativeInput: true, relativeInput: true }); let colors = { color1: "rgba(255,255,255,1)", color2: "rgba(212,235,255,1)", color3: "rgba(201,231,255,1)", color4: "rgba(191, 226, 255,1)" }; let options = { alphaSpeed: 10, alphaVariance: 1, color: [colors.color1, colors.color2, colors.color3, colors.color4], composition: "source-over", count: 200, direction: 161, float: 0.75, glow: 0, imageUrl: [ "snow-1.svg", "snow-2.svg", "snow-3.svg", "snow-4.svg", "snow-5.svg", "snow-6.svg" ], maxAlpha: 2, maxSize: 22, minAlpha: -0.2, minSize: 4, parallax: 2.75, rotation: 0.5, shape: "image", speed: 3, style: "fill", twinkle: false, xVariance: 5, yVariance: 0, }; function resize() { let w = scene.offsetWidth; scene.style.height = w/2 + "px"; scene.style.fontSize = w/22 + "px"; } window.onload = function() { resize(); let main = document.querySelector('.falling'); let mySparticles = new sparticles.Sparticles(main, options); } window.onresize = resize; |
А для вордпрес случайно нет такого же конструктора как для InstantCms?