jquery css3 réalise l'effet de pétales tombant aléatoirement sur la page Web background_javascript skills

Réalisation de l'effet fleur flottante - rendus :

Voir la démo Téléchargement du code source

Exigences :

Un jquery,,, vous pouvez le savoir rien qu'en regardant le titre

jQuery Transit a aussi ce truc

http://github.com/rstacruz/jquery.transit

Extension jquery pour certains effets

L'effet des fleurs flottantes est un peu plus compliqué. Il nécessite une certaine quantité de code JavaScript et est obtenu grâce à une combinaison de JS et CSS3. En observant l'effet à droite, vous pouvez décomposer grossièrement la mise en place des fleurs flottantes

Piaohua est supérieur au niveau du personnage
Il y a beaucoup de fleurs flottantes
Les fleurs flottantes se déplaceront selon une certaine trajectoire
Les fleurs flottantes ont un effet dégradé
Les fleurs flottantes ont un effet rotatif
​ ​​​​Les fleurs disparaîtront lorsqu'elles tomberont au sol

La combinaison de JS et CSS3 utilisée ici implémente la partie rotation Tout d'abord, du point de vue de la mise en page, les fleurs flottantes sont plus hautes que tous les éléments internes, la mise en page doit donc être au même niveau que la page li.

Principe de mise en œuvre :

Appelez le code JS via une minuterie pour créer de manière continue et dynamique des nœuds de flocon de neige, sélectionnez au hasard une image comme arrière-plan, attribuez trois attributs de style initiaux en haut, à gauche et opacité, et exécutez l'animation de ces trois attributs via un changement d'animation de transition. L'ensemble du principe est en réalité très simple, impliquant principalement quelques détails : comme la création d'éléments, la randomisation des images, le traitement aléatoire de la gauche et de l'opacité au début, le calcul des valeurs finales, etc.

Processus d'exécution :

getImagesName sélectionne au hasard 6 images, snowflakeURl définit une plage d'adresses

createSnowBox crée le nœud de l'élément flocon de neige et ajoute un style snowRoll, qui est l'implémentation par image clé de la rotation

Réglez la minuterie sur 200 ms pour générer en continu des objets flocon de neige, calculez les valeurs initiales des trois attributs, créez l'élément flocon de neige via createSnowBox et attachez la valeur initiale, puis exécutez la transition pour attacher la valeur finale, et exécutez l'animation

Une fois l'animation terminée, exécutez $(this).remove() pour supprimer cet objet

Alors simplifiez le code, car je veux seulement l'effet fleur flottante

 <div id='content'>
 <!-- 飘花 -->
 <div id="snowflake"></div>
 </div>

Obtenez la largeur et la hauteur de l'extérieur #content

Ensuite, faites l'effet à l'intérieur de #snowflake

#content { width: 100%; height: 100%; top: 42px;
overflow: hidden; position: absolute; }

Alors le CSS est comme ça, en haut : 42px c'est à cause de ma hauteur de navigation

#snowflake { width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
.snowRoll { position: absolute; opacity: 0; -webkit-animation-name: mysnow; -webkit-animation-duration: 20s; -moz-animation-name: mysnow; -moz-animation-duration: 20s; height: 80px; }
 @-webkit-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -webkit-transform: rotate(1080deg);
}
 100% {
 -webkit-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}
 @-moz-keyframes mysnow { 0% {
 bottom: 100%;
}
 50% {
 -moz-transform: rotate(1080deg);
}
 100% {
 -moz-transform: rotate(0deg) translate3d(50px, 50px, 50px);
}
}

Voici des effets spéciaux CSS3 tels que l'ajout d'une rotation aux fleurs flottantes

<script type="text/javascript">
$(function() {

 var snowflakeURl = [
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_1.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_2.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_3.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_4.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_5.png',
 'http://images.cnblogs.com/cnblogs_com/LoveOrHate/723567/o_6.png'
 ] //js设置数组存储6张花瓣的图片
　　
 var container = $("#content");
 visualWidth = container.width();
 visualHeight = container.height();
　　//获取content的宽高
 ///////
 //飘雪花 //
 ///////
 function snowflake() {
 // 雪花容器
 var $flakeContainer = $('#snowflake');
　　　　　　
 // 随机六张图
 function getImagesName() {
 return snowflakeURl[[Math.floor(Math.random() * 6)]];
 }
 // 创建一个雪花元素
 function createSnowBox() {
 var url = getImagesName();
 return $('<div class="snowbox" />').css({
 'width': 41,
 'height': 41,
 'position': 'absolute',
 'backgroundSize': 'cover',
 'zIndex': 100000,
 'top': '-41px',
 'backgroundImage': 'url(' + url + ')'
 }).addClass('snowRoll');
 }
 // 开始飘花
 setInterval(function() {
 // 运动的轨迹
 var startPositionLeft = Math.random() * visualWidth - 100,
 startOpacity = 1,
 endPositionTop = visualHeight - 40,
 endPositionLeft = startPositionLeft - 100 + Math.random() * 500,
 duration = visualHeight * 10 + Math.random() * 5000;

 // 随机透明度，不小于0.5
 var randomStart = Math.random();
 randomStart = randomStart < 0.5 &#63; startOpacity : randomStart;
 // 创建一个雪花
 var $flake = createSnowBox();
 // 设计起点位置
 $flake.css({
 left: startPositionLeft,
 opacity : randomStart
 });
 // 加入到容器
 $flakeContainer.append($flake);
 // 开始执行动画
 $flake.transition({
 top: endPositionTop,
 left: endPositionLeft,
 opacity: 0.7
 }, duration, 'ease-out', function() {
 $(this).remove() //结束后删除
 });
 
 }, 200);
 } 　　
 snowflake()
　　　//执行函数

})
</script>

Le code ci-dessus explique comment cet article utilise jquery pour obtenir l'effet de pétales tombant aléatoirement sur l'arrière-plan de la page Web. J'espère qu'il vous plaira.