Trang Chủ

Giới Thiệu

Blog

Tìm kiếm

Quảng cáo:

Trang chủ > Share code xtgem

Share code javascript hiệu ứng ảnh chuyển động cực đẹp khi kéo thanh cuộn trang

» Thể loại: Share code xtgem
» Last Updated: 13/06/16
» Lượt xem: 1471 Views

Nội dung:

Hiệu ứng ảnh 3d biến đổi theo thanh cuộn. Hiệu ứng javascript cực đẹp.

Giới thiệu: Khi bạn kéo thanh cuộn từ trên xuống các bức ảnh sẽ có hiệu ứng to dần và mờ dần đi như kiểu nó đang ngày càng gần bạn hơn. Các bức ảnh tiếp theo sẽ xuất hiện và biến mất y như bức ảnh đầu tiên. Khi hết ảnh sẽ xuất hiện một thông báo. Khi bạn kéo chuột ngược lại hiệu ứng sẽ chạy ngược lại.

Tải về:

Functions.js
jquery.mousewheel.js
jquery-latest.min.js
style.css

HTMl:

<div id="wrapper" >
           <div id="environment">
		<div id="main" style="transform: translate3d(0px, 0px, 44px);">
		
		
		<img src="" data-idx="" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, px);-moz-transform: translate3d(0px, 0px, px);-ms-transform: translate3d(0px, 0px, px);-o-transform: translate3d(0px, 0px, px);transform: translate3d(0px, 0px, px);">
		
		<img src="" data-idx="1" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -1000px);-moz-transform: translate3d(0px, 0px, -1000px);-ms-transform: translate3d(0px, 0px, -1000px);-o-transform: translate3d(0px, 0px, -1000px);transform: translate3d(0px, 0px, -1000px);">
		
		<img src="" data-idx="2" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -2000px);-moz-transform: translate3d(0px, 0px, -2000px);-ms-transform: translate3d(0px, 0px, -2000px);-o-transform: translate3d(0px, 0px, -2000px);transform: translate3d(0px, 0px, -2000px);">
		
		<img src="" data-idx="3" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -3000px);-moz-transform: translate3d(0px, 0px, -3000px);-ms-transform: translate3d(0px, 0px, -3000px);-o-transform: translate3d(0px, 0px, -3000px);transform: translate3d(0px, 0px, -3000px);">
		
		<img src="" data-idx="4" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -4000px);-moz-transform: translate3d(0px, 0px, -4000px);-ms-transform: translate3d(0px, 0px, -4000px);-o-transform: translate3d(0px, 0px, -4000px);transform: translate3d(0px, 0px, -4000px);">
		
		<img src="" data-idx="5" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -5000px);-moz-transform: translate3d(0px, 0px, -5000px);-ms-transform: translate3d(0px, 0px, -5000px);-o-transform: translate3d(0px, 0px, -5000px);transform: translate3d(0px, 0px, -5000px);">
		
		<img src="" data-idx="6" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -6000px);-moz-transform: translate3d(0px, 0px, -6000px);-ms-transform: translate3d(0px, 0px, -6000px);-o-transform: translate3d(0px, 0px, -6000px);transform: translate3d(0px, 0px, -6000px);">
		
		<img src="" data-idx="7" width="" height="" alt="" style="-webkit-transform: translate3d(0px, 0px, -7000px);-moz-transform: translate3d(0px, 0px, -7000px);-ms-transform: translate3d(0px, 0px, -7000px);-o-transform: translate3d(0px, 0px, -7000px);transform: translate3d(0px, 0px, -7000px);">

</div>
           </div>
         
         <div id="loading"><p style="margin-top: 295px;">Xin chờ admin upload thêm ảnh!</p></div>
           </div>
	</div>

Bạn có thể thấy các thẻ html img có giá trị trong các thẻ data-idx tăng dần và trong transform giảm dần. Nếu muốn thêm ảnh chỉ cần làm đúng theo quy luật trên là được. Dòng chữ trong thẻ p cuối cùng dùng để hiện thông báo khi hết ảnh.

Demo

Bài viết cùng chủ đề

XtScript Error: Timeout.

Exchanger

U-ON

c-stat

Sitemap.html Sitemap.txt Sitemap.xml

Some Web: Thanhgiang642.wordpress.com tailieu642.xtgem.com

Old school Easter eggs.