스노우 스크립트를 다운로드하세요. 웹 디자인 및 검색 엔진 최적화. "Lobster" 글꼴 연결하기
좋은 하루 보내시고 새해 복 많이 받으세요. 새해 전날, 저는 매우 가볍고 아름답고 소박한 눈 내리는 플러그인을 여러분과 공유하고 싶습니다. 이 스크립트는 정말 매우 가볍고 html 파일에 쉽게 들어가며 사이트의 html 코드 자체를 사용하는 데 어려움을 주지 않습니다. 사실, 별도의 파일에 저장할 수 있습니다. 하지만 편의상 모든 작업을 하나의 파일로 처리했습니다.
여기서는 할 말이 별로 없고, 이번 눈이 내리는 모습을 지켜보는 것이 더 낫다. 또한 매우 아름다운 배경과 Google의 아름다운 "Lobster" 글꼴로 작성된 "새해 복 많이 받으세요"라는 문구도 있습니다. 이 파일을 온라인 축하 카드로 쉽게 바꿀 수 있습니다.
완성된 웹사이트에 떨어지는 눈송이 스크립트 연결하기 1. jQuery 라이브러리 연결하기태그 사이에 다음과 같이 연결하고 다음 코드를 삽입합니다.
2. 스타일 연결
CSS 코드를 CSS 파일(일반적으로 style.css)에 붙여넣습니다.
#캔버스( 테두리: 1px 단색 검정색; 위치: 절대값; z-색인: 10000; ) #flake( 색상: #fff; 위치: 절대값; 글꼴 크기: 25px; 상단: -50px; )
3. snow.js 파일 생성snow.js 파일을 만들고 여기에 다음 자바스크립트 코드를 삽입해 보겠습니다.
var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity = 0.5 + Math.random ( ); var sizeFlake = 10 + Math.random() * 20; var endPositionTop = documentHeight - 40; var endPositionLeft = startPositionLeft - 100 + Math.random() * 200; var DurationFall = documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, 왼쪽 : endPositionLeft, 불투명도: 0.2 ), DurationFall, "linear", function() ( $(this).remove()); ), 500); var 눈 = (); var 스노우플렉스 = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. style .color = "#F3F3F3"; flex.style.opacity = Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parsInt(flex .style.top) + 5 + "px"; flex.style.left =parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) (clearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t = setInterval(function())( snow.snowflex(); ), 500); ); //눈보라(); var 안개 = (); Fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); Fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; Fog.draw(ctx, x, y); ), 100); ); //fog.start();
다음 위치에 js 파일을 포함합니다.
4. HTML 코드 삽입
글쎄, 가장 중요한 것은 남아 있습니다. 떨어지는 눈의 HTML 코드를 다음 위치에 삽입하십시오.
❄
모든 일을 올바르게 수행했다면 귀하의 사이트에 눈이 내리기 시작할 것입니다.
배경 이미지와 큰 헤더, 떨어지는 눈송이 연결하기이 옵션은 배경 이미지와 큰 "새해 복 많이 받으세요"라는 제목이 있다는 점에서 다릅니다. 이 버전의 떨어지는 눈 스크립트를 귀하의 웹 사이트에 연결하는 것은 매우 간단합니다. 필요하다:
1. 아카이브를 다운로드하고 압축을 푼다. 2. jQuery 라이브러리를 연결한다.jQuery 라이브러리를 포함해야 합니다(이 라이브러리가 이미 포함되어 있는 경우에는 필요하지 않음). 태그 사이에 다음과 같이 연결하고 다음 코드를 삽입합니다.
3. "Lobster" 글꼴을 연결하세요
jQuery 라이브러리를 연결하는 것과 유사하게 "새해 복 많이 받으세요" 비문의 글꼴을 연결합니다.
당연히 이 비문과 글꼴이 필요하지 않으면 포함하지 않아도 되지만 CSS의 H1 속성에서 "font-family: "Lobster", 필기체;"를 제거하거나 교체하세요. 나만의 글꼴로
4. 연결 스타일옵션 A: CSS 코드를 CSS 파일에 붙여넣습니다. 코드는 다음과 같습니다.
Img.bg ( /* 배경을 채우기 위한 규칙 설정 */ min-height: 100%; min-width: 1024px; /* 비례 배율 설정 */ width: 100%; height: auto; /* 위치 설정 설정 */ 위치: 고정; 위쪽: 0; 왼쪽: 0; ) h1 ( 글꼴 계열: "랍스터", 필기체; 색상: #FFF; 글꼴 크기: 90px; 텍스트 정렬: 중앙; 줄 높이: 95px; 글꼴- Weight: Normal; margin-top: 300px; text-shadow: 5px 5px 5px #000; ) @media screen and (max-width: 1024px) ( /* 특정 이미지에만 해당 */ img.bg ( 왼쪽: 50% ; 여백 왼쪽: -512px; /* 50% */ ) ) html, body ( 글꼴 계열: Helvetica, Arial, sans-serif; 글꼴 크기: 12px; 줄 높이: 16px; 패딩: 0; 여백: 0; 색상: #333; ) .bar ( 배경색: #111; 색상: #f0f0f0; 상자 그림자: 0px 0px 2px #333; 줄 높이: 25px; 패딩: 0px 20px; 불투명도: 0.7; ) . bar:hover ( 불투명도: 1; ) .bar a ( 색상: #DDD; ) .bar a:hover ( 색상: #FFFFFF; ) a ( 색상: #FFFFFF; 텍스트 장식: 없음; ) a:hover ( 색상 : #CCC; ) #canvas ( 테두리: 1px 단색 검정; 위치: 절대; Z-색인: 10000; ) #flake ( 색상: #fff; 위치: 절대; 글꼴 크기: 25px; 상단: -50px; ) #page ( 위치: 상대; )
옵션 B. 예를 들어 snow.css와 같은 별도의 파일을 만들고 여기에 동일한 코드를 붙여 넣을 수도 있습니다. 단, 다음과 같이 헤드에 포함되어야 합니다.
5. 내리는 눈 스크립트 연결하기
옵션 A. 이렇게 하려면 사이트 맨 아래(닫기 전)에 다음 자바스크립트 코드를 삽입해야 합니다.
var t = setInterval(function())( var documentHeight = $(document).height(); var startPositionLeft = Math.random() * $(document).width() - 100; var startOpacity= 0.5 + Math.random ( ); var sizeFlake= 10 + Math.random() * 20; var endPositionTop= documentHeight - 40; var endPositionLeft= startPositionLeft - 100 + Math.random() * 200; var DurationFall= documentHeight * 10 + Math.random() * 5000; $("#flake") .clone() .appendTo("body") .css(( left: startPositionLeft, opacity: startOpacity, "font-size": sizeFlake )) .animate(( top: endPositionTop, 왼쪽 : endPositionLeft, 불투명도: 0.2 ), DurationFall, "linear", function() ( $(this).remove()); ), 500); var 눈 = (); var 스노우플렉스 = (); snowflex.create = function( snowflex)( var flex = document.createElement("div"); flex.innerHTML = "❄"; flex.style.fontSize = 10 + Math.random() * 20 + "px"; flex .style.top = - 50 + Math.random() * 20 + "px"; flex.style.left = Math.random() * 1500 + "px"; flex.style.position = "absolute"; flex. style .color = "#F3F3F3"; flex.style.opacity= Math.random(); document.getElementsByTagName("body").appendChild(flex); return flex; ); snow.snowflex = function()( var flex = snowflex.create(); var x = -1 + Math.random() * 2; var t = setInterval(function())( flex.style.top = parsInt(flex .style.top) + 5 + "px"; flex.style.left =parseInt(flex.style.left) + x + "px"; if (parseInt(flex.style.top) > 1500) (clearInterval(t ) ; document.getElementsByTagName("body").removeChild(flex); ) ), 45 + Math.random() * 20); ); snow.storm = function())( var t= setInterval(function())( snow.snowflex(); ), 500); ); //눈보라(); var 안개 = (); Fog.draw = function(ctx, x, y)( ctx.fillStyle = "rgba(255, 255, 255, " + Math.random() + ")"; ctx.arc(x, y, 10,0, Math.PI*2,true); ctx.closePath(); ctx.fill(); ); Fog.start = function())( var ctx = document.getElementById("canvas").getContext("2d"); var x = 0; var y = 0; var t = setInterval(function())( x = 300 + 300*Math.sin(x); y = 300 + 300* -Math.cos(x); x += 2; Fog.draw(ctx, x, y); ), 100); ); //fog.start();
옵션 B. CSS 코드와 마찬가지로 자바스크립트를 별도의 파일(snow.js라고도 함)에 배치하고 헤드에 포함할 수 있습니다.
6. 배경 이미지 채우기
아카이브의 bg.jpg 이미지를 사이트 루트에 업로드하세요.
7. HTML 코드 삽입이제 남은 가장 중요한 일은 떨어지는 눈의 HTML 코드를 삽입하는 것입니다.
새해 복 많이 받으세요! ❄
떨어지는 눈 스크립트가 성공적으로 연결되었습니다. 실제 작동하는 모습을 꼭 지켜보세요. 모두 제일 좋다!
jQuery를 사용한 웹 디자인은 매우 쉽습니다! 웹사이트의 "Falling Snow"새해가 다가오면 대부분의 웹사이트에는 "눈이 내린다"는 것과 판매 및 할인 페이지라는 두 가지 항목이 나타납니다. 둘 다 매우 간단하게 수행됩니다. Snow - jQuery 플러그인을 사용하고 가격표 위에 굵은 빨간색 선으로 그어진 더 큰 숫자를 묘사하여 할인 및 판매를 표시합니다. 이는 아마도 이전 가격에 해당합니다.
그러나 이제 우리는 사이트 페이지에 "떨어지는 눈"을 배치하는 데에만 관심이 있습니다. 이에 대한 몇 가지 간단한 옵션이 있습니다. jQuery를 기반으로 그 중 두 가지를 살펴보겠습니다.
자연스럽게 snow라는 이름의 새 폴더를 생성한 다음 아카이브를 다운로드하고 이 폴더에 압축을 풀어 "falling snow" 설치를 시작합니다. 여기에는 jquery-1.8.3.min.js와 jquery.snow.js라는 두 개의 스크립트가 있습니다.
다음으로, 태그 내의 페이지 헤더에 이 스크립트의 경로를 나타내는 다음 줄과 "떨어지는 눈"을 초기화하는 작은 JavaScript를 추가해야 합니다.
$(문서).ready(함수())(
$.fn.snow();
});
사이트 페이지에 눈이 나타나게 하려면 태그 안에 추가하면 됩니다.
.
이 플러그인에는 네 가지 설정만 있습니다. 이는 jquery.snow.js 파일의 맨 시작 부분에 있으며 편집기나 메모장에서 변경할 수 있습니다.
minSize: 10 , // 최소 눈송이 크기
maxSize: 20 , // 눈송이의 최대 크기
newOn: 500 , // ms 단위의 눈송이 출현 빈도, 즉 눈 밀도
flakeColor: "#bbbbbb" // 눈송이 색상
또한 jquery.snow.js 파일의 첫 번째 줄에 설정된 snow의 z-index:10 값을 확인하세요. 페이지에 슬라이더(슬라이드 쇼) 및 드롭다운 메뉴가 있는 경우 눈송이의 위치를 설정합니다.
"떨어지는 눈"의 두 번째 버전
이 옵션에서는 그림 1과 같이 자신만의 눈송이 사진을 사용합니다. 덕분에 플러그인이 더욱 다채로워지고, 추가로 다른 효과에도 성공적으로 사용될 수 있습니다. 예를 들어, 눈송이 사진을 장미 꽃잎으로 교체하면 결혼식 웹사이트의 페이지를 장식할 수 있고, 떨어지는 데이지는 여름 휴가에 대한 웹사이트에 적합할 것입니다.
그림 1. 웹사이트의 "Falling Snow"
설치하려면 다시 snow 폴더를 사용하고 이제 스크립트 외에도 4가지 서로 다른 눈송이 이미지가 있는 또 다른 아카이브의 압축을 풀겠습니다. 다음으로 첫 번째 예와 유사하게 태그 내부에 새 "떨어지는 눈" 파일의 경로를 나타내는 줄을 삽입합니다.
마지막으로 태그 내부에 줄을 추가합니다(가급적이면 페이지 시작 부분에).
.
눈이 없으면 snow.js 파일의 다음 줄에 눈송이 이미지의 전체 주소를 올바르게 입력했는지 확인하세요.
var img=" 
눈 밀도 조정은 동일한 파일에서 행의 숫자 인수로 지정됩니다.
setTimeout("snow("+id+");",100 ); // 눈송이의 빈도,
그리고 눈송이가 일직선으로 움직이는 속도
$("#snow_"+id).animate((top:"150%",left:""+end_x+"%"),20000 ,function() // 눈송이 이동 속도
또한 첫 번째 옵션과 마찬가지로 눈이 페이지에 있는 슬라이더, 드롭다운 메뉴 등과 겹치도록 z-index:10 값에 주의하세요.
겨울이 오기까지 시간이 거의 남지 않았으며 많은 웹마스터들이 사이트에 적절한 분위기를 조성하기 시작했습니다. 이번 행사에서는 귀하의 웹사이트에 사용할 수 있는 눈 효과를 소개합니다.
jSnow – jQuery의 범용 떨어지는 눈 스크립트“jSnow”라는 플러그인을 사용하여 사이트에 추가되는 매우 아름다운 눈 효과로 선택을 시작하겠습니다.
데모:
동의합니다 - 아름답습니다!
웹사이트에 이 효과를 설치하려면 다음을 수행하세요.
1. 기사 마지막 부분에 있는 jsnow.zip 아카이브를 다운로드하세요. FTP 또는 기타 편리한 방법을 통해 콘텐츠의 압축을 풀고 웹사이트에 업로드하세요.
불행하게도 이 스크립트는 새 버전의 jQuery에서는 작동하지 않으므로 우리는 현재 가지고 있는 것에 만족합니다.
3. 전에스크립트를 포함하려면 닫는 태그를 사용하세요.
$(document).ready(function() ( $("body").jSnow(( vSize: 100, // 플레이크 영역 크기: 30, // 눈송이 수 flakeColor: ["#fff"], // 색상 flakeMinSize : 10, // 눈송이의 최소 크기 flakeMaxSize: 20, // 눈송이의 최대 크기 FallSpeedMin: 1, // 눈송이의 최소 속도 FallSpeedMax: 2, // 눈송이의 최대 속도 flakeCode:["." ] // 눈송이 유형 )); ) );
이 코드는 눈송이의 크기, 눈송이가 차지하는 영역의 높이, 색상 및 기타 주석이 달린 매개변수를 조정합니다.
아시다시피 스크립트는 보편적이며 둥근 눈 대신 다음과 같이 별을 추가할 수 있습니다.
FlakeCode:["*"] // 눈송이 모양
또는 둥근 눈과 별 무리:
FlakeCode:[".", "*"] // 눈송이 모양
다른 기호(및 달러 기호 - $)도 마찬가지입니다.
이 스크립트는 주요 콘텐츠와 겹치지 않고 사이트 상단을 꾸미기에 좋습니다.
Snowstorm – JavaScript로 만든 스마트한 눈 내리는 스크립트왜 똑똑한가요? 이 스크립트에는(이 기사에서 설명하는 다른 스크립트와 달리) 눈송이를 밀어내는 추가 효과가 있기 때문입니다. 즉, 사이트에서 마우스 커서를 움직이면 눈송이가 반대 방향으로 돌진합니다. 커서가 화면 중앙에서 멀어질수록 눈송이가 더 빠르게 움직입니다.
데모:
사이트에 이 효과를 설치하려면 추가 라이브러리가 필요하지 않습니다. 당신이 해야 할 일은 다음과 같습니다:
1. 기사 마지막 부분에 있는 snowstorm.zip 아카이브를 다운로드하세요. 편리한 방식으로 콘텐츠의 압축을 풀고 사이트에 업로드하세요.
window.onload = function() ( snowStorm.snowColor = "#fff"; // 눈송이의 색상 snowStorm.flakesMaxActive = 100; // 보이는 눈송이의 최대 수 snowStorm.followMouse = true; // true - 커서를 추적합니다. false - no snowStorm.snowCharacter = "."; // 눈송이 유형 );
필요한 경우 스크립트 애니메이션을 변경합니다.
눈송이가 커서에서 멀어지는 것 외에도 일부는 화면 하단에 달라붙어 눈송이가 눈더미를 형성하는 듯한 느낌을 줍니다.
강설량 - jQuery를 사용하여 눈더미와 함께 떨어지는 눈의 효과저는 이 스크립트를 가장 좋아합니다. 미세한 눈 알갱이를 구현하고 지정된 요소에 작은 눈더미도 수집하기 때문입니다.
데모:
이 효과는 다른 효과보다 설치하는 데 시간이 조금 더 걸립니다.
1. 사이트에 jQuery 라이브러리가 없으면 HEAD 섹션에 포함하세요.
3. 시작 태그에 "darkBg" 클래스를 할당합니다.
4. 전에닫는 태그와 함께 스크립트를 포함합니다.
$(document).ready(function() ( document.body.className = "darkBg"; $(document).snowfall((collection: ".collectonme", flakeCount: 200 // 눈송이 수 )); ));
5. 그리고 마지막 단계에서 눈더미가 형성되어야 하는 요소에 클래스를 할당합니다.
클래스="수집"
사이트에 눈더미가 형성되는 것을 원하지 않으면 스크립트에서 다음 줄을 제거하십시오.
컬렉션: ".collectonme",
이는 필수 조치입니다. 그렇지 않으면 귀하의 사이트에 눈이 내리지 않습니다.
훌륭한 스크립트입니다. 이것은 이전에 우리 웹사이트에서 사용했던 것과 정확히 같습니다.
CSS3를 사용한 부드러운 레이어드 떨어지는 눈 효과아시다시피 여기서는 모든 종류의 스크립트를 사용하지 않고 순수한 CSS를 사용하겠습니다.
데모:
마법같지 않나요?
이 효과를 직접 설치하려면 간단한 세 단계를 수행하세요.
1. 기사 마지막 부분에 있는 snow_img.zip 아카이브를 다운로드하세요. FTP 또는 호스팅 파일 관리자를 통해 콘텐츠의 압축을 풀고 사이트에 업로드하세요.
2. 스타일 파일에 다음을 삽입하십시오(바람직하게는 맨 아래에):
SnowContainer(너비: 100%; 높이: 100%; 위치: 절대; 위쪽: 0; 왼쪽:0; z-색인: -1; ) #snow(너비: 100%; 높이: 100%; 배경 이미지: URL ("/snow/snow_1.png"), url("/snow/snow_2.png"), url("/snow/snow_3.png"); -webkit-animation: snow 20s 선형 무한; -moz-animation: 눈 20초 선형 무한; -ms-animation: 눈 20초 선형 무한; 애니메이션: 눈 20초 선형 무한; ) @keyframes 눈( 0%( 배경 위치: 0px 0px, 0px 0px, 0px 0px; ) 100%( 배경 위치 : 500px 1000px, 400px 400px, 300px 300px; ) ) @-moz-keyframes 눈 ( 0% ( 배경 위치: 0px 0px, 0px 0px, 0px 0px; ) 100% ( 배경 위치: 500px 1000px, 400px 400px, 300px 300px; ) ) @-webkit-keyframes 눈 ( 0% ( 배경 위치: 0px 0px, 0px 0px, 0px 0px; ) 100% ( 배경 위치: 500px 1000px, 400px 400px, 300px 300px; ) ) @-ms- 키프레임 눈( 0%( 배경 위치: 0px 0px, 0px 0px, 0px 0px; ) 100%( 배경 위치: 500px 1000px, 400px 400px, 300px 300px; ) )
그런 다음 모든 변경 사항을 저장하십시오.
의심할 여지없이 웹사이트 방문자를 즐겁게 해줄 눈 효과의 좋은 선택은 다음과 같습니다.
