소스자료실
2017.03.21 10:04

스크롤 내릴 때 선 그려지기

조회 수 35 추천 수 0 댓글 6
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>polygon</title>

<style>

.text {
	position: fixed;
	font-size: 30px;
	top: 0;
	z-index: 9999;
}
svg {
	top: 0;
	position: fixed;
}

polygon {
	transition: all 0.5s;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<script>
$(document).ready(function(){
	
	var triangle = document.getElementById("triangle");
	var length = triangle.getTotalLength();
	
	
	// The start position of the drawing
triangle.style.strokeDasharray = length;

// Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
triangle.style.strokeDashoffset = length;



	$(window).scroll(function(){
		
		var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = length * scrollpercent;

  // Reverse the drawing (when scrolling upwards)
  triangle.style.strokeDashoffset = length - draw;
  
  
  $(".text").text( triangle.style.strokeDashoffset );
		
	});



});
</script>


</head>

<body>
<div class="text"></div>
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 width="1920" height="4173" 
 preserveAspectRatio="xMidYMid meet">
<path  fill="none" stroke="black" stroke-width="10" id="triangle" d="M380.057,601.5
		c0,0-90.778-41.767-119.778-63.767s-101.486-86.33-102-156c-0.514-69.669,46-161,81-199s86.75-94.236,202-108
		c115.251-13.763,228,5,303,44s110,146,114,181s-8,116.334-24.666,154.334c-16.667,38-76,136.001-126,161.333
		c-50,25.334-70,33.332-88,36.666S515.864,662.73,514.946,681.4c-0.918,18.668,26.667,23.332,50.667,38
		c24,14.666,36.666,26.668,34,37.334c-2.667,10.666-33.333,51.334-35.333,64s7.334,20,30.667,18s84.667-18.668,118-24.668
		s96-21.332,132.666-13.332c36.667,8,38.667,20.666,36,34c-2.666,13.332-44,55.332-56,64.666s-116,99.334-124,108.668
		c-8,9.332-25.333,31.332-6.667,39.332c18.667,8,43.333,4.666,66.667,0c23.333-4.666,32-5.332,32-5.332
		s-111.334,44.668-133.334,56.668s-72,57.332-83.333,67.998c-11.333,10.668-131.333,121.334-135.333,121.334s-61.334-48-71.334-54
		s-137.334-96-157.334-104s-54.459-27.943-82-12c-27.541,15.944-30,52-27.334,66.666c2.667,14.668,56.666,107.332,57.999,116.666
		c1.334,9.334-1.281,32.387-28,26.666c-26.719-5.72-20.667,2.666-18,9.334c2.667,6.666,51.334,41.332,63.334,54
		c12,12.666,134,141.334,143.333,154.666c9.334,13.334,92.667,91.336,148,112.002c55.334,20.666,103.333,33.998,144.667,36.666
		c41.333,2.666,104.667-7.334,137.333-7.334c32.667,0,126.863,5.004,148,23.336c21.137,18.334,21.334,81.334,18,107.334
		c-3.333,26-12.667,82.664-22,107.998c-9.333,25.334-45.333,86-64.667,102c-19.333,16-110,76.668-153.333,84.668
		s-65.333,12.666-89.333,2.666s-37.683-24.666-58.175-18c-20.492,6.666-55.159,45.334-76.492,48
		c-21.333,2.666-68.667-6.668-86.667-15.334s-90-32.666-118-23.332c-28,9.332-42.001,15.998-59.334,43.332
		c-17.334,27.334-34.667,88.002-32.667,105.334c2,17.334,21.333,56,56.667,67.334c35.333,11.332,103.333,8,131.333,4
		s105.333-19.334,127.333-19.334s50.862,8.586,53.334,37.334c2.471,28.746-28,43.332-43.333,51.332
		c-15.334,8-16,20.666-9.334,31.334c6.667,10.666,72,100.666,86,120.666s49.333,84.67,59.333,109.336s20,80.666,20,101.998
		c0,21.334-4,72-18.667,102s-56.667,78-75.333,92c-18.667,14-61.335,51.336-64.668,76.002s0,66,35.334,88
		c35.333,22,89.333,46.666,131.333,58c42,11.332,146,31.332,172.667,37.332c26.666,6,90.667,22.666,103.333,39.332
		c12.667,16.668,34.667,56.668,36.667,76.668c2,20-2.667,44-37.334,54c-34.666,10-111.333,18-148,14.666
		c-36.666-3.334-111.333-12-151.333-10s-65.333,2.666-68.666,34.666s8.667,52,9.333,74.668
		c0.667,22.666,10.233,43.332-32.217,48.666c-42.449,5.334-118.449,1.334-146.449,9.334s-62.667,21.334-52.667,38
		s74.667,35.635,106.667,40.484"/>
</g>
	
</svg>

<section style="height: 6000px;"></section>

</body>
</html>




  • ?
    콘디쌤 2017.03.21 10:05
    <?xml version="1.0" encoding="utf-8"?>
    <!-- Generator: Adobe Illustrator 14.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 43363)  -->
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
    <svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
    	 width="1920px" height="4173px" viewBox="0 0 1920 4173" enable-background="new 0 0 1920 4173" xml:space="preserve">
    <g>
    	<defs>
    		<rect id="SVGID_1_" width="1920" height="4173"/>
    	</defs>
    	<clipPath id="SVGID_2_">
    		<use xlink:href="#SVGID_1_"  overflow="visible"/>
    	</clipPath>
    	<path clip-path="url(#SVGID_2_)" fill="none" stroke="#FF0000" stroke-miterlimit="10" d="M380.057,601.5
    		c0,0-90.778-41.767-119.778-63.767s-101.486-86.33-102-156c-0.514-69.669,46-161,81-199s86.75-94.236,202-108
    		c115.251-13.763,228,5,303,44s110,146,114,181s-8,116.334-24.666,154.334c-16.667,38-76,136.001-126,161.333
    		c-50,25.334-70,33.332-88,36.666S515.864,662.73,514.946,681.4c-0.918,18.668,26.667,23.332,50.667,38
    		c24,14.666,36.666,26.668,34,37.334c-2.667,10.666-33.333,51.334-35.333,64s7.334,20,30.667,18s84.667-18.668,118-24.668
    		s96-21.332,132.666-13.332c36.667,8,38.667,20.666,36,34c-2.666,13.332-44,55.332-56,64.666s-116,99.334-124,108.668
    		c-8,9.332-25.333,31.332-6.667,39.332c18.667,8,43.333,4.666,66.667,0c23.333-4.666,32-5.332,32-5.332
    		s-111.334,44.668-133.334,56.668s-72,57.332-83.333,67.998c-11.333,10.668-131.333,121.334-135.333,121.334s-61.334-48-71.334-54
    		s-137.334-96-157.334-104s-54.459-27.943-82-12c-27.541,15.944-30,52-27.334,66.666c2.667,14.668,56.666,107.332,57.999,116.666
    		c1.334,9.334-1.281,32.387-28,26.666c-26.719-5.72-20.667,2.666-18,9.334c2.667,6.666,51.334,41.332,63.334,54
    		c12,12.666,134,141.334,143.333,154.666c9.334,13.334,92.667,91.336,148,112.002c55.334,20.666,103.333,33.998,144.667,36.666
    		c41.333,2.666,104.667-7.334,137.333-7.334c32.667,0,126.863,5.004,148,23.336c21.137,18.334,21.334,81.334,18,107.334
    		c-3.333,26-12.667,82.664-22,107.998c-9.333,25.334-45.333,86-64.667,102c-19.333,16-110,76.668-153.333,84.668
    		s-65.333,12.666-89.333,2.666s-37.683-24.666-58.175-18c-20.492,6.666-55.159,45.334-76.492,48
    		c-21.333,2.666-68.667-6.668-86.667-15.334s-90-32.666-118-23.332c-28,9.332-42.001,15.998-59.334,43.332
    		c-17.334,27.334-34.667,88.002-32.667,105.334c2,17.334,21.333,56,56.667,67.334c35.333,11.332,103.333,8,131.333,4
    		s105.333-19.334,127.333-19.334s50.862,8.586,53.334,37.334c2.471,28.746-28,43.332-43.333,51.332
    		c-15.334,8-16,20.666-9.334,31.334c6.667,10.666,72,100.666,86,120.666s49.333,84.67,59.333,109.336s20,80.666,20,101.998
    		c0,21.334-4,72-18.667,102s-56.667,78-75.333,92c-18.667,14-61.335,51.336-64.668,76.002s0,66,35.334,88
    		c35.333,22,89.333,46.666,131.333,58c42,11.332,146,31.332,172.667,37.332c26.666,6,90.667,22.666,103.333,39.332
    		c12.667,16.668,34.667,56.668,36.667,76.668c2,20-2.667,44-37.334,54c-34.666,10-111.333,18-148,14.666
    		c-36.666-3.334-111.333-12-151.333-10s-65.333,2.666-68.666,34.666s8.667,52,9.333,74.668
    		c0.667,22.666,10.233,43.332-32.217,48.666c-42.449,5.334-118.449,1.334-146.449,9.334s-62.667,21.334-52.667,38
    		s74.667,35.635,106.667,40.484"/>
    </g>
    </svg>
    
  • ?
    콘디쌤 2017.03.21 15:24
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>polygon</title>
     
    <style>
     
        .text {
            position: fixed;
            font-size: 30px;
            top: 0;
            z-index: 9999;
        }
        svg {
            top: 0;
            position: fixed;
            width: 1920px;
            height: 4173px;
            
            left: 50%;
            transform: translateX(-50%);
        }
    
    </style>
     
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
     
    <script>
        $(document).ready(function(){
    
            var triangle = document.getElementById("triangle");
            var length = triangle.getTotalLength();
    
    
            // The start position of the drawing
            triangle.style.strokeDasharray = length;
    
            // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
            triangle.style.strokeDashoffset = length;
    
            $(window).scroll(function(){
    
                var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
    
                var draw = length * scrollpercent;
    
                // Reverse the drawing (when scrolling upwards)
                triangle.style.strokeDashoffset = length - draw;
    
                $(".text").text( triangle.style.strokeDashoffset   + "  :  " + triangle.get );
                
                
                if ($(window).scrollTop()  > 1000 ) {
                    $("svg").css("top", ($(window).scrollTop() - 1000) * -1 * 0.7  );    
                }
                
    
            });
    
    
    
        });
    </script>
     
     
    </head>
     
    <body>
    <div class="text"></div>
        
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
        
    <g>    
    <path  fill="none" stroke="black" stroke-width="10" id="triangle" d="M380.057,601.5
            c0,0-90.778-41.767-119.778-63.767s-101.486-86.33-102-156c-0.514-69.669,46-161,81-199s86.75-94.236,202-108
            c115.251-13.763,228,5,303,44s110,146,114,181s-8,116.334-24.666,154.334c-16.667,38-76,136.001-126,161.333
            c-50,25.334-70,33.332-88,36.666S515.864,662.73,514.946,681.4c-0.918,18.668,26.667,23.332,50.667,38
            c24,14.666,36.666,26.668,34,37.334c-2.667,10.666-33.333,51.334-35.333,64s7.334,20,30.667,18s84.667-18.668,118-24.668
            s96-21.332,132.666-13.332c36.667,8,38.667,20.666,36,34c-2.666,13.332-44,55.332-56,64.666s-116,99.334-124,108.668
            c-8,9.332-25.333,31.332-6.667,39.332c18.667,8,43.333,4.666,66.667,0c23.333-4.666,32-5.332,32-5.332
            s-111.334,44.668-133.334,56.668s-72,57.332-83.333,67.998c-11.333,10.668-131.333,121.334-135.333,121.334s-61.334-48-71.334-54
            s-137.334-96-157.334-104s-54.459-27.943-82-12c-27.541,15.944-30,52-27.334,66.666c2.667,14.668,56.666,107.332,57.999,116.666
            c1.334,9.334-1.281,32.387-28,26.666c-26.719-5.72-20.667,2.666-18,9.334c2.667,6.666,51.334,41.332,63.334,54
            c12,12.666,134,141.334,143.333,154.666c9.334,13.334,92.667,91.336,148,112.002c55.334,20.666,103.333,33.998,144.667,36.666
            c41.333,2.666,104.667-7.334,137.333-7.334c32.667,0,126.863,5.004,148,23.336c21.137,18.334,21.334,81.334,18,107.334
            c-3.333,26-12.667,82.664-22,107.998c-9.333,25.334-45.333,86-64.667,102c-19.333,16-110,76.668-153.333,84.668
            s-65.333,12.666-89.333,2.666s-37.683-24.666-58.175-18c-20.492,6.666-55.159,45.334-76.492,48
            c-21.333,2.666-68.667-6.668-86.667-15.334s-90-32.666-118-23.332c-28,9.332-42.001,15.998-59.334,43.332
            c-17.334,27.334-34.667,88.002-32.667,105.334c2,17.334,21.333,56,56.667,67.334c35.333,11.332,103.333,8,131.333,4
            s105.333-19.334,127.333-19.334s50.862,8.586,53.334,37.334c2.471,28.746-28,43.332-43.333,51.332
            c-15.334,8-16,20.666-9.334,31.334c6.667,10.666,72,100.666,86,120.666s49.333,84.67,59.333,109.336s20,80.666,20,101.998
            c0,21.334-4,72-18.667,102s-56.667,78-75.333,92c-18.667,14-61.335,51.336-64.668,76.002s0,66,35.334,88
            c35.333,22,89.333,46.666,131.333,58c42,11.332,146,31.332,172.667,37.332c26.666,6,90.667,22.666,103.333,39.332
            c12.667,16.668,34.667,56.668,36.667,76.668c2,20-2.667,44-37.334,54c-34.666,10-111.333,18-148,14.666
            c-36.666-3.334-111.333-12-151.333-10s-65.333,2.666-68.666,34.666s8.667,52,9.333,74.668
            c0.667,22.666,10.233,43.332-32.217,48.666c-42.449,5.334-118.449,1.334-146.449,9.334s-62.667,21.334-52.667,38
            s74.667,35.635,106.667,40.484"/>
    </g>
         
    </svg>
     
    <section style="height: 6000px;"></section>
     
    </body>
    </html>
  • ?
    콘디쌤 2017.03.21 15:24
    http://crlog.com/2017/03211419.html
  • ?
    콘디쌤 2017.03.23 09:02
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>polygon</title>
      
    <style>
    
    	body {
    		background-image: url(img/background.jpg);
    	}
      
        .text {
            position: fixed;
            font-size: 30px;
            top: 0;
            z-index: 9999;
        }
        svg {
            top: 0;
            position: fixed;
            width: 1200px;
            height: 3636px;
             
            left: 50%;
            transform: translateX(-50%);
        }
     
    </style>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      
    <script>
        $(document).ready(function(){
     
            var triangle = document.getElementById("triangle");
            var length = triangle.getTotalLength();
     
     
            // The start position of the drawing
            triangle.style.strokeDasharray = length;
     
            // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
            triangle.style.strokeDashoffset = length;
     
            $(window).scroll(function(){
     
                var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
     
                var draw = length * scrollpercent;
     
                // Reverse the drawing (when scrolling upwards)
                triangle.style.strokeDashoffset = length - draw;
     
                $(".text").text( triangle.style.strokeDashoffset   + "  :  " + triangle.get );
                 
                 
                if ($(window).scrollTop()  > 1000 ) {
                    $("svg").css("top", ($(window).scrollTop() - 1000) * -1 * 0.7  );    
                }
                 
     
            });
     
     
     
        });
    </script>
      
      
    </head>
      
    <body>
    <div class="text"></div>
         
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
         
    <g>    
    <path  fill="none" stroke="black" stroke-width="15" stroke-linecap="round"  id="triangle" 
    d="
    		M414.239,674.214c0,0-251-31-279-228s129.87-337.818,240-386c144-63,512.578-87.39,641,112c135.094,209.749,5.729,351.662-123,422
    		c-126.417,69.075-204,80-204,80s-67,12,13,39s132,5,71,42l-116,41c0,0-100,44,136,2s212-38,142,54s-264,212,62,122
    		c0,0-226,76-244,92s-120,110-120,110l-110,92l-80-62c0,0-480-378-314-48s154,548,326,476s164-42,246-8s104,98-22,60s182-198,250-10
    		l32,74l154,290c0,0,176,334-88,162s-276-92-324-100s-328-182-504,18s-38,274,288,304s-122-234,100,64s154,210,48,210s-154,20-4,142
    		s446,576,150,456s-522-46-266,106s40-318,66,148"
    
    />
    </g>
          
    </svg>
      
    <section style="height: 6000px;"></section>
      
    </body>
    </html>
  • ?
    콘디쌤 2017.03.23 09:16
    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>polygon</title>
      
    <style>
    
    	body {
    		background: linear-gradient( #a96, #aaC) ;
    
    
    	}
      
        .text {
            position: fixed;
            font-size: 30px;
            top: 0;
            z-index: 9999;
        }
        svg {
            top: 100px;
            position: fixed;
            width: 1200px;
            height: 3636px;
             
            left: 50%;
            transform: translateX(-50%);
        }
     
    </style>
      
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      
    <script>
        $(document).ready(function(){
     
            var triangle = document.getElementById("triangle");
            var length = triangle.getTotalLength();
     
     
            // The start position of the drawing
            triangle.style.strokeDasharray = length;
     
            // Hide the triangle by offsetting dash. Remove this line to show the triangle before scroll draw
            triangle.style.strokeDashoffset = length;
     
            $(window).scroll(function(){
     
                var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);
     
                var draw = length * scrollpercent;
     
                // Reverse the drawing (when scrolling upwards)
                triangle.style.strokeDashoffset = length - draw;
     
                $(".text").text( triangle.style.strokeDashoffset   + "  :  " + triangle.get );
                 
                 
                if ($(window).scrollTop()  > 1000 ) {
                    $("svg").css("top", ($(window).scrollTop() - 1000) * -1 * 0.7  );    
                }
                 
     
            });
     
     
     
        });
    </script>
      
      
    </head>
      
    <body>
    <div class="text"></div>
         
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" >
         
    <g>    
    <path  fill="none" stroke="#fff" stroke-width="15" stroke-linecap="round"  id="triangle" 
    d="
    		M414.239,674.214c0,0-251-31-279-228s129.87-337.818,240-386c144-63,512.578-87.39,641,112c135.094,209.749,5.729,351.662-123,422
    		c-126.417,69.075-204,80-204,80s-67,12,13,39s132,5,71,42l-116,41c0,0-100,44,136,2s212-38,142,54s-264,212,62,122
    		c0,0-226,76-244,92s-120,110-120,110l-110,92l-80-62c0,0-480-378-314-48s154,548,326,476s164-42,246-8s104,98-22,60s182-198,250-10
    		l32,74l154,290c0,0,176,334-88,162s-276-92-324-100s-328-182-504,18s-38,274,288,304s-122-234,100,64s154,210,48,210s-154,20-4,142
    		s446,576,150,456s-522-46-266,106s40-318,66,148"
    
    />
    </g>
          
    </svg>
      
    <section style="height: 6000px; background-image: url(img/movie_bg.png);"></section>
      
    </body>
    </html>
  • ?
    콘디쌤 2017.05.31 08:52
    http://crlog.com/2017/03211004.html
?

List of Articles
번호 카테고리 제목 글쓴이 날짜 조회 수
공지 디지털디자인A NCS (국가직무능력표준) - 디지털디자인 학습모듈 1 콘디쌤 2015.04.19 394
447 소스자료실 스크롤 클리핑 콘디쌤 2017.05.31 26
446 소스자료실 특정 스크롤 위치에 도달하였을 때 파이차트 동작하기 1 콘디쌤 2017.05.30 26
445 소스자료실 자식이 absolute 일때 부모의 높이값 정하기 콘디쌤 2017.05.29 29
444 소스자료실 HTML안에 HTML 로드 하기 콘디쌤 2017.05.18 62
443 소스자료실 모바일 스와이프 (swipe) 6 file 콘디쌤 2017.04.11 38
442 소스자료실 ellipsis 글자... 콘디쌤 2017.04.06 25
441 소스자료실 이미지 꾸물럭 거리기 콘디쌤 2017.03.31 24
440 소스자료실 맥북 덮개 열리기 콘디쌤 2017.03.30 25
439 소스자료실 동영상 클리핑 1 콘디쌤 2017.03.30 25
438 소스자료실 다이아몬드 썸네일 콘디쌤 2017.03.30 21
» 소스자료실 스크롤 내릴 때 선 그려지기 6 콘디쌤 2017.03.21 35
436 소스자료실 팝업 창 하루 동안 안 보이게 하기 콘디쌤 2017.03.20 32
435 소스자료실 파이차트 애니메이션 콘디쌤 2017.03.20 17
434 소스자료실 CSS로 도형 그리기 1 콘디쌤 2017.03.15 33
433 소스자료실 슬라이더 갤러리 + 팝업 기본형 콘디쌤 2017.03.06 63
432 소스자료실 스크롤을 내리면 게이지 바가 늘어남 콘디쌤 2017.03.03 41
431 소스자료실 마우스를 올리면 흑백이미지에서 컬러이미지로 변환 콘디쌤 2017.03.03 44
430 소스자료실 Datepicker Widget 콘디쌤 2016.10.15 159
429 소스자료실 Google Hosted Libraries (CDN) 2 콘디쌤 2016.07.13 421
428 소스자료실 캐러셀 + 페이드 슬라이더 예제 콘디쌤 2016.06.23 213
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 23 Next
/ 23