jquery css3는 웹 페이지 background_javascript 기술에서 무작위로 떨어지는 꽃잎 효과를 실현합니다.-JS 튜토리얼-php.cn

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

WBOY

풀어 주다： 2016-05-16 15:44:48

원래의

2655명이 탐색했습니다.

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

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

요구사항:

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

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를 사용하여 웹 페이지 배경에 무작위로 떨어지는 꽃잎 효과를 구현하는 방법입니다.