摘要:某天機緣巧合之下看到一文章然后被深深的迷上了鏈接在此用又學了一招,活變美女但是已經了然后花幾天時間去封裝一下水平有限所以標題注明簡陋版首先我們用的女神圖片一基本框架搭建先來看看基本框架構建長這樣子我家女神點擊看美女現在來逐步分析一
某天,機緣巧合之下看到一文章,然后被深深的迷上了,鏈接在此brucelyy:用又學了一招,活變美女(但是已經404了)
然后花幾天時間去封裝一下,水平有限,所以標題注明簡!陋!!版!!!
首先我們用的女神圖片
先來看看基本框架構建長這樣子
我家女神
現在來逐步分析一下主要代碼作用:
html {overflow: hidden;} //隱藏滾動條引起的抖動
其中能實現的關鍵布局在于下面代碼:
#wrapper div { background-image: url("http://b-ssl.duitang.com/uploads/item/201801/14/20180114134621_auNRE.jpeg"); background-repeat: no-repeat; background-size: 40rem auto; position: absolute; width: 40rem; height: 40rem; }
如果不使用絕對定位接下來的碎片化無法完成的,
由此也可以發現簡陋版目前問題一:必須使用背景圖實現;
背景圖引起的問題二:需要設置高寬尺寸
其他就沒什么好說了,目前html+部分就出來了
其實原理說起來也不復雜,就是生成多個小元素分別定位截圖,然后通過伸縮,旋轉,變形,透明等效果用時間差展現.這里直接使用3屬性,控制一個類匹配控制效果
生成時間差的:
// 生成隨機時間差 function Random(start, end) { return Math.random() * (end - start) + start; }
實現效果是通過拆分多個小碎片然后記錄當前位置定位圖片位置,做成類似雪碧圖的效果
// 拆分多個小碎片然后記錄當前位置定位圖片位置,做成類似雪碧圖的效果 for (var i = 0; i < r; i++) { for (var j = 0; j < c; j++) { var _div = document.createElement("div"); var _left = j * w, _top = i * h; _div.style.Text = "width:" + w + "px;height:" + h + "px;left:" + _left + "px;top:" + _top + "px; opacity:0;background-position:" + (-_left) + "px " + (-_top) + "px"; _div.style.transition = "all " + Random(1, 1.8) + "s ease"; _div.style.transform = "perspective(800px) translate3d(" + Random(-200, 200) + "px, " + Random(-200, 200) + "px,300px) rotate(" + Random(-90, 90) + "deg) scale(" + Random(0, 2) + ")" box.appendChild(_div); } }
因為這樣子分別插入太耗性能了,我是通過字符創批量插入
由此也可以發現簡陋版目前問題三:性能損耗大,暫時思路可以考慮canvas,不過我研究不多,就先用字符串解決先;
觸發的關鍵樣式:
#div.set div { opacity: 1 !important; transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important; -moz-transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important; -webkit-transform: perspective(800px) translate3d(0px, 0px, 0px) rotate(0deg) scale(1) !important; }
這個好在是通過樣式控制而不是js觸發,省事好多
三,終于開始封裝了這里我是基于提升個人寫作水平跟對新手友好態度寫得比較詳細啰嗦,老手直接跳到最下看代碼就行了.
現在大家應該都明白原理了,還是為了省事,我就直接用jQuery封裝了,常規步驟先寫個外層:
$(function($) { //默認配置 var defaults = { }; }(jQuery));
然后前面的時間差函數可以直接在jQuery內部作為全局函數的插件附加到內核上去的,而常規的配置可以有:觸發元素,分列數量,動畫時間,延遲時間和控制動畫的類名;即
$(function ($) { //默認配置 var defaults = { className: "explode",//控制類名 button: null, //觸發按鍵 lines: 5, //分割行 rows: 5, //分割列 delay: 0, //ms,動畫自動執行時間,默認300毫秒,0為不觸發 time: [1, 1.8], //動畫時間范圍 }; $.fn.explode = function (options) { //保持this指向,此處沒有必要將this包在$號中如$(this),因為this已經是一個jQuery對象。 var $self = this, _explode = { //初始化 init: function () { //執行條件 options = $.extend(defaults, options); }, } // 生成隨機時間差 $.Random = function (start, end) { return Math.random() * (end - start) + start; } }(jQuery))
里面有些值得一說的代碼片段: var $self = this,以前我以為應該是var $self = $(this),其實這里的this是指向觸發對象,例如$("#div").explode(),
所以這里的this === $("#div")?
其實不是,就算內容一樣,但其實指向的堆棧不一樣,所以不相等.詳情可參考我之前寫的筆記關于基本類型和引用類型小知識
這是可配置項,如果不懂用法可以百度一下,總的來說就合并成一個對象,有相同配置后面覆蓋前面的;
options = $.extend(defaults, options);
原文說的批量插入dom元素修改如下:
// 生成DOM createDom: function() { var i = 0, j = 0, width = $self.width(), height = $self.height(), w = width / options.lines, h = height / options.rows, str = ""; // 切割碎片 for (; i < options.rows; i++) { for (j = 0; j < options.lines; j++) { //填充截圖動畫 var _left = j * w, _top = i * h; str += "" } }; return str; }
因為都沒什么難點,就不說了,相信大家都看得明白
考慮到插件最好能解決大多數問題,用戶只要調用就完成效果,所以我把控制樣式也動態加進去
//添加歸為樣式 addStyle: function () { var $style = $("style"), _w = $self.width(), _style = "#wrapper div {background-image:url(" + $self.attr("data-img") + ")} #wrapper." + options.className + " div { opacity: 1!important; transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important; -moz-transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important; -webkit-transform: perspective(" + _w + ") translate3d(0px, 0px, 0px) rotate(0deg) scale(1)!important; }"; //已有樣式區域就追加文本,否則新增 $style.length ? $style.append(_style) : $("") .text(_style) .appendTo("body"); }
還有上面提到的觸發元素,就綁定跟解綁
//綁定 bind: function() { //如果有觸發元素 if(options.button) $(options.button).click(function() { $self.toggleClass(options.className); }) }, //移除綁定 destroy: function() { $(options.button).unbind("click") },
加個自動執行跟鏈式調用就差不多了,init改為這樣
//初始化 init: function() { //執行條件 options = $.extend(defaults, options); //添加歸位樣式 this.addStyle(); //批量渲染DOM $self.append(this.createDom()); //綁定 this.bind(); //如果有自動執行要求,默認300 if(options.delay) setTimeout(function() { $self.addClass(options.className); }, options.delay) //鏈式調用 return this; },
調用方式如下:
$(function() { $("#wrapper").explode({ className: "explode", button: $("#button"), lines: 5, rows: 5, delay: 300, time: [1, 2] }); })
嗯,簡陋版就這樣了,下面是完整代碼:
美女
效果是出來的,弊端也很多
問題四:碎片沒有消失,衹是隱藏,很容易會遮擋住其他元素的交互事件,例如案例中的按鈕
問題五:能不能實現出在實際網站里,圖片碎片進入,往下滑才會引發視圖下面的圖片執行,更大可能是要結合懶加載插件使用
嗯,暫時想到這么多,雖然能力不過硬,有想法還是好的,以后慢慢完善,有人可以交流下會好點
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/116160.html
摘要:某天機緣巧合之下看到一文章然后被深深的迷上了鏈接在此用又學了一招,活變美女但是已經了然后花幾天時間去封裝一下水平有限所以標題注明簡陋版首先我們用的女神圖片一基本框架搭建先來看看基本框架構建長這樣子我家女神點擊看美女現在來逐步分析一 某天,機緣巧合之下看到一文章,然后被深深的迷上了,鏈接在此brucelyy:用又學了一招,活變美女(但是已經404了)然后花幾天時間去封裝一下,水平有限,所...
摘要:某天機緣巧合之下看到一文章然后被深深的迷上了鏈接在此用又學了一招,活變美女但是已經了然后花幾天時間去封裝一下水平有限所以標題注明簡陋版首先我們用的女神圖片一基本框架搭建先來看看基本框架構建長這樣子我家女神點擊看美女現在來逐步分析一 某天,機緣巧合之下看到一文章,然后被深深的迷上了,鏈接在此brucelyy:用又學了一招,活變美女(但是已經404了)然后花幾天時間去封裝一下,水平有限,所...
摘要:同時需要注意橫豎屏會把陀螺儀的改變開始傾斜時,記錄開始的陀螺儀位置,主體層的位置。檢測陀螺儀轉動時間與插件的兼容角度傾斜進行緩沖動畫以上便是主要代碼,最好自己運行調試下,運用好動畫函數,理解每一個步驟。前端實現還有更牛的。 前端的3D(css3版本),其實是依托Css3的功勞,先上一個例子 http://antario.act.qq.com/代碼地址:鏈接:https://pan.b...
摘要:總的來說就是兩步生成小的元素,整齊的覆蓋在大的元素上,像下圖這樣為了方便看,把每個小元素,分開了些。鼠標移入時,讓所有小元素動起來,主要是改變小元素的屬性的值具體實現的代碼也并不多,下面是注釋很詳細的代碼。 說明 和大家分享一個看上去很酷的效果,先來看效果圖吧! showImg(https://segmentfault.com/img/remote/1460000016194106);...
閱讀 3695·2021-11-25 09:43
閱讀 2655·2021-11-25 09:43
閱讀 3854·2021-11-24 09:38
閱讀 703·2021-11-18 10:02
閱讀 2246·2021-09-22 15:53
閱讀 3004·2019-08-30 15:44
閱讀 2780·2019-08-30 14:01
閱讀 2765·2019-08-29 15:15