站設(shè)計是一個永無止境的創(chuàng)意工作,優(yōu)秀的網(wǎng)站通常伴有多個具有一定難度的網(wǎng)頁特效。當(dāng)然,一款設(shè)計精良、用戶體驗(yàn)度高的網(wǎng)站對您的業(yè)務(wù)推廣是至關(guān)重要的。
在這個互聯(lián)網(wǎng)數(shù)字時代,網(wǎng)站幾乎是每一個客戶的第一聯(lián)系人,這表示著您的網(wǎng)站必須能代表您提供具有說服力的內(nèi)容,并能將潛在用戶轉(zhuǎn)化為真實(shí)客戶。
根據(jù)Adobe在2015年的研究,如果人們在互聯(lián)網(wǎng)上瀏覽的時間只有15分鐘,那么其中三分之二的時間是在與那些設(shè)計較為高端的網(wǎng)站進(jìn)行互動。同樣,約60%的人會選擇與高端設(shè)計或帶有個性網(wǎng)頁特效的網(wǎng)站進(jìn)行接觸,而不是停留在一個看上去很普通的網(wǎng)站上面。
更多的統(tǒng)計數(shù)字指出了網(wǎng)站設(shè)計的重要性,在這里,北京網(wǎng)站建設(shè)公司千助科技將介紹八種網(wǎng)站特效來讓你的網(wǎng)站更具吸引力。
當(dāng)您準(zhǔn)備新上線一個業(yè)務(wù)或一款產(chǎn)品時,您的營銷工作應(yīng)該在實(shí)際網(wǎng)頁發(fā)布之前就開始啟動了,你可以通過一個倒計時的網(wǎng)頁特效來通知客戶,馬上會有好事情發(fā)生!不要等到你一切都準(zhǔn)備好了,才想起來還沒有通知客戶。
你知道什么樣的特效在網(wǎng)站中是不可忽視的嗎?那就是動態(tài)元素!它會將訪客的注意力瞬間集中起來,這是非常符合人性的。如果你在自己的網(wǎng)站上使用了一個引人入勝的視頻背景,那么它除了可以美化你的網(wǎng)站外,還能吸引訪客的注意力。
加入視頻背景的網(wǎng)頁特效還能讓你的網(wǎng)站看起來非常有現(xiàn)代感,它增加的是一個可以讓人感興趣的元素,可不是一幅靜態(tài)圖像。根據(jù) Food Blogger Pro 的統(tǒng)計,他們通過添加一個完美的視頻背景,將著陸頁的轉(zhuǎn)化率提高了138%!這不是很神奇嗎?
但是請注意,視頻背景在設(shè)計上也是件很棘手的事情,你必須以正確的方式讓它和網(wǎng)頁上的其他元素完美融合,通過你的美學(xué)設(shè)計讓他們看上去非常和諧。
將紋理添加到可以點(diǎn)擊的按鈕或鏈接背景,可以大幅提高網(wǎng)站的外觀效果,并能使按鈕或鏈接脫穎而出,將用戶引導(dǎo)到重要的可點(diǎn)擊操作中,提升網(wǎng)站整體的導(dǎo)航性。
即便登錄頁面只是提供給您的團(tuán)隊(duì)或員工使用,也不能降低它得設(shè)計質(zhì)量和精細(xì)度。因?yàn)樗情_始一份工作的出發(fā)地,有一個好的開始會讓接下來的工作事半功倍。
如果是提供給客戶使用的登錄頁面,你還可以根據(jù)他們的需求進(jìn)行一些定制化的設(shè)計,比如幫助他們記住上次的登錄信息、找回忘記的密碼、或使用安全控件進(jìn)行登錄等。另外,登錄頁面的酷炫設(shè)計也會讓你的網(wǎng)站看起來非常專業(yè)化和上檔次。
根據(jù) Hubspot 的統(tǒng)計,與圖像結(jié)合的文字內(nèi)容被人記住的可能性比沒有圖像的文字要高出40倍,也就是說,具有圖像的文字內(nèi)容將更容易被訪客記住。
當(dāng)您了解了圖像的重要性以及它們的巨大吸引力時,你就知道該如何以最佳方式呈現(xiàn)它們了。使用 Photoshop 來增強(qiáng)圖像的特殊效果是再好不過的了,使用過濾器、調(diào)整對比度/色調(diào)/亮度、或添加其他的特殊效果,都可以讓圖片看起來更加生動。
為網(wǎng)站增加文字懸停的網(wǎng)頁特效是最近的一種趨勢,文字懸停效果看起來很酷,并以非常有趣的方式挖掘重要或相關(guān)的信息。例如,如果您將鼠標(biāo)懸停的圖像上時,則會出現(xiàn)一組文本,來顯示產(chǎn)品名稱或相關(guān)說明,這些特效可以讓網(wǎng)站顯得非常時尚。
無論是 GIF 動畫,還是 Javascript 網(wǎng)頁特效動畫,都有百萬種方法可以吸引用戶的注意力。你可以跟隨滾動條滑動給出翻頁動畫,也可以跟隨鼠標(biāo)移上給出高亮顯示特效。
你可能已經(jīng)遇到過這種奇妙的網(wǎng)頁特效,一個模擬真正的翻書特效,它看起來就像一本真正的書,您可以在圖書頁面上看到圖像和文字。當(dāng)您點(diǎn)擊頁面時,頁面會以非常逼真的方式將這一頁翻過去,它肯定會比一個靜態(tài)的產(chǎn)品目錄更加吸引人。
以上所有這些方式將有助于改善您網(wǎng)站的整體外觀和感覺,增強(qiáng)網(wǎng)站的體驗(yàn)度,并幫助您將訪客轉(zhuǎn)化為潛在客戶,您還等什么?現(xiàn)在就可以聯(lián)系北京網(wǎng)站建設(shè)公司千助科技,為您提供高端網(wǎng)站建設(shè)服務(wù),期待驚人的結(jié)果吧!
年是2017年了,前端找工作也越來越難,在2015年前端真的就是爆炸,會做個靜態(tài)頁面也能有公司要你,雖然說工資不是非常高,但是你只要會點(diǎn)javascript那工資就可觀了,我有個同事以前就是培訓(xùn)過的,現(xiàn)在做了部門的主管,現(xiàn)在新人只要是培訓(xùn)的他都一概回絕,可怕,關(guān)鍵是這哥們自己就是培訓(xùn)出來的,大概自己也知道自己剛?cè)肼殨r是幾桶水,混到現(xiàn)在也不容易,不能苦了后輩們啊,到現(xiàn)在找工作的要求確實(shí)高了,如果你沒找到工作會做這個特效不一定能找到工作,但是如果你在職會做這個你的工資一定不會低于八千,看清楚這是兩個球嵌套旋轉(zhuǎn),不是一個球。
在這里還是要說提下我自己建的前端學(xué)習(xí)群:593757064,不說別的,能進(jìn)我的群的沒點(diǎn)實(shí)力咋行呢,哈哈,當(dāng)然零基礎(chǔ)小白我也挺歡迎,畢竟誰都是從零開始的嘛,只要肯多問多想多練,早晚超過我,不定期分享干貨,歡迎初學(xué)和進(jìn)階中的小伙伴。
下面這個動態(tài)圖就是今天講的特效:
截圖讓你看下效果:
源碼全部分享:
剛學(xué)javascript時很多都會出現(xiàn)這種情況,想學(xué)這個知識點(diǎn),確發(fā)現(xiàn)要先學(xué)十個知識點(diǎn) ,的這種情況,會產(chǎn)生一種無力感,而且本身這些知識點(diǎn)之間相互也沒有什么聯(lián)系,只能靠自己全學(xué)會后,然后在融會貫通,這肯定很困難,許多人都在這里迷失了方向,這就是沒有全局視角而導(dǎo)致的,感覺前端學(xué)不完,沒有盡頭,讓人很容易產(chǎn)生畏難的情緒,解決方法其實(shí)很簡單,就是把所有里零散的知識點(diǎn)結(jié)合項(xiàng)目當(dāng)成一個整體來學(xué),不信你試試。
最后再說二點(diǎn)建議吧:
學(xué)會利用碎片式學(xué)習(xí),有很多人總是找借口,沒時間學(xué)習(xí),暑假學(xué)習(xí),寒假學(xué)習(xí),把這個事做完了在學(xué)習(xí),我只想對這類人,學(xué)習(xí)不需要準(zhǔn)備,本身就是一場修行。
這個javascript特效就算做完了,想要完整代碼自己練習(xí)的小伙伴進(jìn)我的群自助領(lǐng)取,已經(jīng)上傳到群文件里了:593757064,歡迎初學(xué)和進(jìn)階中的小伙伴。
者:前端Q
轉(zhuǎn)發(fā)鏈接:https://mp.weixin.qq.com/s/ewFfXptccFs5KvjUINLGbQ
小試牛刀,實(shí)現(xiàn)了六款簡單常見HTML5 Canvas特效濾鏡,并且封裝成一個純JavaScript可調(diào)用的API文件gloomyfishfilter.js。支持的特效濾鏡分別為:
1.反色
2.灰色調(diào)
3.模糊
4.浮雕
5.雕刻
6.合理
2.灰色調(diào):獲取一個預(yù)期點(diǎn)RGB值r,g,b則新的RGB值
newr=(r * 0.272)+(g * 0.534)+(b * 0.131);
newg=(r * 0.349)+(g * 0.686)+(b * 0.168);
newb=(r * 0.393)+(g * 0.769)+(b * 0.189);
3.模糊:基于一個5 * 5的卷積核
4.浮雕與雕刻:
根據(jù)當(dāng)前預(yù)期的前一個預(yù)期RGB值與它的后一個重新的RGB值之差再加上128
5.總體:模擬了物體在鏡子中與之對應(yīng)的效果。
var canvas=document.getElementById("target");
canvas.width=source.clientWidth;
canvas.height=source.clientHeight;
**if**(!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5compatible browser.");
**return**;
}
// get 2D context of canvas and draw image
tempContext=canvas.getContext("2d");
var source=document.getElementById("source");
tempContext.drawImage(source, 0, 0, canvas.width,canvas.height);
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData=canvasData.data;
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener){
element.addEventListener(type, handler,**false**);
}else{
element.attachEvent('on'+type, handler);// for IE6,7,8
}
}
<scriptsrc=*"gloomyfishfilter.js"*></script> //導(dǎo)入API文件
gfilter.colorInvertProcess(binaryData, len); //調(diào)用 API
<meta http-equiv="X-UA-Compatible"*content=*"chrome=IE8">
效果演示:
CSS部分:
#svgContainer {
width:800px;
height:600px;
background-color:#EEEEEE;
}
#sourceDiv { float: left; border: 2px solid blue}
#targetDiv { float: right;border: 2px solid red}
filter1.html中HTML源代碼:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=IE8">
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Canvas Filter Demo</title>
<link href="default.css" rel="stylesheet" />
<script src="gloomyfishfilter.js"></scrip>
</head>
<body>
<h1>HTML Canvas Image Process - By Gloomy Fish</h1>
<div id="svgContainer">
<div id="sourceDiv">
<img id="source" src="../test.png" />
</div>
<div id="targetDiv">
<canvas id="target"></canvas>
</div>
</div>
<div id="btn-group">
<button type="button" id="invert-button">反色</button>
<button type="button" id="adjust-button">灰色調(diào)</button>
<button type="button" id="blur-button">模糊</button>
<button type="button" id="relief-button">浮雕</button>
<button type="button" id="diaoke-button">雕刻</button>
<button type="button" id="mirror-button">鏡像</button>
</div>
</body>
</html>
filter1.html中JavaScript源代碼:
var tempContext=null; // global variable 2d context
window.onload=function() {
var source=document.getElementById("source");
var canvas=document.getElementById("target");
canvas.width=source.clientWidth;
canvas.height=source.clientHeight;
if (!canvas.getContext) {
console.log("Canvas not supported. Please install a HTML5 compatible browser.");
return;
}
// get 2D context of canvas and draw image
tempContext=canvas.getContext("2d");
tempContext.drawImage(source, 0, 0, canvas.width, canvas.height);
// initialization actions
var inButton=document.getElementById("invert-button");
var adButton=document.getElementById("adjust-button");
var blurButton=document.getElementById("blur-button");
var reButton=document.getElementById("relief-button");
var dkButton=document.getElementById("diaoke-button");
var mirrorButton=document.getElementById("mirror-button");
// bind mouse click event
bindButtonEvent(inButton, "click", invertColor);
bindButtonEvent(adButton, "click", adjustColor);
bindButtonEvent(blurButton, "click", blurImage);
bindButtonEvent(reButton, "click", fudiaoImage);
bindButtonEvent(dkButton, "click", kediaoImage);
bindButtonEvent(mirrorButton, "click", mirrorImage);
}
function bindButtonEvent(element, type, handler)
{
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else {
element.attachEvent('on'+type, handler); // for IE6,7,8
}
}
function invertColor() {
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData=canvasData.data;
// Processing all the pixels
gfilter.colorInvertProcess(binaryData, len);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
function adjustColor() {
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
var binaryData=canvasData.data;
// Processing all the pixels
gfilter.colorAdjustProcess(binaryData, len);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
function blurImage()
{
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
// Processing all the pixels
gfilter.blurProcess(tempContext, canvasData);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
function fudiaoImage()
{
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
// Processing all the pixels
gfilter.reliefProcess(tempContext, canvasData);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
function kediaoImage()
{
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
// Processing all the pixels
gfilter.diaokeProcess(tempContext, canvasData);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
function mirrorImage()
{
var canvas=document.getElementById("target");
var len=canvas.width * canvas.height * 4;
var canvasData=tempContext.getImageData(0, 0, canvas.width, canvas.height);
// Processing all the pixels
gfilter.mirrorProcess(tempContext, canvasData);
// Copying back canvas data to canvas
tempContext.putImageData(canvasData, 0, 0);
}
濾鏡源代碼(gloomyfishfilter.js):
var gfilter={
type: "canvas",
name: "filters",
author: "zhigang",
getInfo: function () {
return this.author + ' ' + this.type + ' ' + this.name;
},
/**
* invert color value of pixel, new pixel=RGB(255-r, 255-g, 255 - b)
*
* @param binaryData - canvas's imagedata.data
* @param l - length of data (width * height of image data)
*/
colorInvertProcess: function(binaryData, l) {
for (var i=0; i < l; i +=4) {
var r=binaryData[i];
var g=binaryData[i + 1];
var b=binaryData[i + 2];
binaryData[i]=255-r;
binaryData[i + 1]=255-g;
binaryData[i + 2]=255-b;
}
},
/**
* adjust color values and make it more darker and gray...
*
* @param binaryData
* @param l
*/
colorAdjustProcess: function(binaryData, l) {
for (var i=0; i < l; i +=4) {
var r=binaryData[i];
var g=binaryData[i + 1];
var b=binaryData[i + 2];
binaryData[i]=(r * 0.272) + (g * 0.534) + (b * 0.131);
binaryData[i + 1]=(r * 0.349) + (g * 0.686) + (b * 0.168);
binaryData[i + 2]=(r * 0.393) + (g * 0.769) + (b * 0.189);
}
},
/**
* deep clone image data of canvas
*
* @param context
* @param src
* @returns
*/
copyImageData: function(context, src)
{
var dst=context.createImageData(src.width, src.height);
dst.data.set(src.data);
return dst;
},
/**
* convolution - keneral size 5*5 - blur effect filter(模糊效果)
*
* @param context
* @param canvasData
*/
blurProcess: function(context, canvasData) {
console.log("Canvas Filter - blur process");
var tempCanvasData=this.copyImageData(context, canvasData);
var sumred=0.0, sumgreen=0.0, sumblue=0.0;
for ( var x=0; x < tempCanvasData.width; x++) {
for ( var y=0; y < tempCanvasData.height; y++) {
// Index of the pixel in the array
var idx=(x + y * tempCanvasData.width) * 4;
for(var subCol=-2; subCol<=2; subCol++) {
var colOff=subCol + x;
if(colOff <0 || colOff >=tempCanvasData.width) {
colOff=0;
}
for(var subRow=-2; subRow<=2; subRow++) {
var rowOff=subRow + y;
if(rowOff < 0 || rowOff >=tempCanvasData.height) {
rowOff=0;
}
var idx2=(colOff + rowOff * tempCanvasData.width) * 4;
var r=tempCanvasData.data[idx2 + 0];
var g=tempCanvasData.data[idx2 + 1];
var b=tempCanvasData.data[idx2 + 2];
sumred +=r;
sumgreen +=g;
sumblue +=b;
}
}
// calculate new RGB value
var nr=(sumred / 25.0);
var ng=(sumgreen / 25.0);
var nb=(sumblue / 25.0);
// clear previous for next pixel point
sumred=0.0;
sumgreen=0.0;
sumblue=0.0;
// assign new pixel value
canvasData.data[idx + 0]=nr; // Red channel
canvasData.data[idx + 1]=ng; // Green channel
canvasData.data[idx + 2]=nb; // Blue channel
canvasData.data[idx + 3]=255; // Alpha channel
}
}
},
/**
* after pixel value - before pixel value + 128
* 浮雕效果
*/
reliefProcess: function(context, canvasData) {
console.log("Canvas Filter - relief process");
var tempCanvasData=this.copyImageData(context, canvasData);
for ( var x=1; x < tempCanvasData.width-1; x++)
{
for ( var y=1; y < tempCanvasData.height-1; y++)
{
// Index of the pixel in the array
var idx=(x + y * tempCanvasData.width) * 4;
var bidx=((x-1) + y * tempCanvasData.width) * 4;
var aidx=((x+1) + y * tempCanvasData.width) * 4;
// calculate new RGB value
var nr=tempCanvasData.data[aidx + 0] - tempCanvasData.data[bidx + 0] + 128;
var ng=tempCanvasData.data[aidx + 1] - tempCanvasData.data[bidx + 1] + 128;
var nb=tempCanvasData.data[aidx + 2] - tempCanvasData.data[bidx + 2] + 128;
nr=(nr < 0) ? 0 : ((nr >255) ? 255 : nr);
ng=(ng < 0) ? 0 : ((ng >255) ? 255 : ng);
nb=(nb < 0) ? 0 : ((nb >255) ? 255 : nb);
// assign new pixel value
canvasData.data[idx + 0]=nr; // Red channel
canvasData.data[idx + 1]=ng; // Green channel
canvasData.data[idx + 2]=nb; // Blue channel
canvasData.data[idx + 3]=255; // Alpha channel
}
}
},
/**
* before pixel value - after pixel value + 128
* 雕刻效果
*
* @param canvasData
*/
diaokeProcess: function(context, canvasData) {
console.log("Canvas Filter - process");
var tempCanvasData=this.copyImageData(context, canvasData);
for ( var x=1; x < tempCanvasData.width-1; x++)
{
for ( var y=1; y < tempCanvasData.height-1; y++)
{
// Index of the pixel in the array
var idx=(x + y * tempCanvasData.width) * 4;
var bidx=((x-1) + y * tempCanvasData.width) * 4;
var aidx=((x+1) + y * tempCanvasData.width) * 4;
// calculate new RGB value
var nr=tempCanvasData.data[bidx + 0] - tempCanvasData.data[aidx + 0] + 128;
var ng=tempCanvasData.data[bidx + 1] - tempCanvasData.data[aidx + 1] + 128;
var nb=tempCanvasData.data[bidx + 2] - tempCanvasData.data[aidx + 2] + 128;
nr=(nr < 0) ? 0 : ((nr >255) ? 255 : nr);
ng=(ng < 0) ? 0 : ((ng >255) ? 255 : ng);
nb=(nb < 0) ? 0 : ((nb >255) ? 255 : nb);
// assign new pixel value
canvasData.data[idx + 0]=nr; // Red channel
canvasData.data[idx + 1]=ng; // Green channel
canvasData.data[idx + 2]=nb; // Blue channel
canvasData.data[idx + 3]=255; // Alpha channel
}
}
},
/**
* mirror reflect
*
* @param context
* @param canvasData
*/
mirrorProcess : function(context, canvasData) {
console.log("Canvas Filter - process");
var tempCanvasData=this.copyImageData(context, canvasData);
for ( var x=0; x < tempCanvasData.width; x++) // column
{
for ( var y=0; y < tempCanvasData.height; y++) // row
{
// Index of the pixel in the array
var idx=(x + y * tempCanvasData.width) * 4;
var midx=(((tempCanvasData.width -1) - x) + y * tempCanvasData.width) * 4;
// assign new pixel value
canvasData.data[midx + 0]=tempCanvasData.data[idx + 0]; // Red channel
canvasData.data[midx + 1]=tempCanvasData.data[idx + 1]; ; // Green channel
canvasData.data[midx + 2]=tempCanvasData.data[idx + 2]; ; // Blue channel
canvasData.data[midx + 3]=255; // Alpha channel
}
}
},
};
感謝閱讀,如果你覺得我今天分享的內(nèi)容,不錯,請點(diǎn)一個贊,謝謝!!
*請認(rèn)真填寫需求信息,我們會在24小時內(nèi)與您取得聯(lián)系。