jquery css3는 웹 페이지 background_javascript 기술에서 무작위로 떨어지는 꽃잎 효과를 실현합니다.

떠다니는 꽃 효과 구현 - 렌더링:

데모 보기 소스 코드 다운로드

요구사항:

제이쿼리,,, 제목만 봐도 알 수 있는 내용

jQuery Transit에도 이런 기능이 있습니다

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

일부 효과에 대한 jquery 확장

떠다니는 꽃의 효과는 좀 더 복잡합니다. 일정량의 JavaScript 코드가 필요하며 JS와 CSS3의 조합을 통해 구현됩니다. 오른쪽의 효과를 관찰하면 떠다니는 꽃의 구현을 대략적으로 분해할 수 있습니다

피아오화는 캐릭터 레벨보다 높습니다
떠다니는 꽃이 많아요
떠다니는 꽃은 일정한 궤적을 따라 움직입니다
떠있는 꽃은 그라데이션 효과를 줍니다
떠다니는 꽃이 회전하는 효과가 있습니다
​ ​​꽃은 땅에 떨어지면 사라집니다

여기서 사용된 JS와 CSS3의 조합은 우선 레이아웃 관점에서 플로팅 꽃이 모든 내부 요소보다 높기 때문에 레이아웃이 페이지 리와 동일한 수준에 있어야 합니다.

구현 원칙:

타이머를 통해 JS 코드를 호출하여 연속적이고 동적으로 눈송이 노드를 생성하고, 그림을 배경으로 무작위로 선택하고, 위쪽, 왼쪽, 불투명도 세 가지 초기 스타일 속성을 할당하고, 전환 애니메이션 변경을 통해 이 세 가지 속성의 애니메이션을 실행합니다. 전체 원리는 실제로 매우 간단하며 주로 요소 생성, 이미지 무작위화, 왼쪽 무작위 처리 및 시작 부분의 불투명도, 최종 값 계산 등과 같은 몇 가지 세부 사항을 포함합니다.

실행과정:

getImagesName은 6개의 사진을 무작위로 선택하고, SnowflakeURl은 주소 범위를 정의합니다.

createSnowBox는 눈송이 요소의 노드를 생성하고 회전의 키프레임 구현인 snowRoll 스타일을 추가합니다

타이머를 200ms로 설정하여 지속적으로 눈송이 객체를 생성하고, 세 가지 속성의 초기값을 계산하고, createSnowBox를 통해 눈송이 요소를 생성하고, 초기값을 첨부한 후, 최종값을 첨부하도록 전환을 실행하고, 애니메이션을 실행합니다

애니메이션이 끝난 후 $(this).remove()를 실행하여 이 개체를 삭제하세요

그런 다음 떠다니는 꽃 효과만 원하므로 코드를 단순화하세요

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

외부 #콘텐츠의 너비와 높이를 가져옵니다

그럼 #눈송이 안에 효과를 넣어보세요

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

그러면 CSS는 이렇습니다. top: 42px는 내 탐색 높이 때문입니다

#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);
}
}

떠있는 꽃에 회전을 추가하는 등 CSS3 특수 효과는 다음과 같습니다

<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>

위 코드는 이 기사에서 jquery를 사용하여 웹 페이지 배경에 무작위로 떨어지는 꽃잎 효과를 구현하는 방법입니다.