HTML5交互式动态景深（DOF）控制动画特效代码实例

Interactive dynamic depth of field

html5, dof

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 16954
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

// global variables
let currentDepth;
let targetElement;
let manualBlur;
let elementQuantity;

// Initialize
setTimeout(function() {
    setPerspective();
    setInteractiveElements();
    generateRandomIndex();
}, 0);

// Applies heights and margins to all elements in dof-container in increasing increments
function setPerspective() {
    let element = document.getElementById("dof-container"); // target container
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    let value = document.getElementById(`quantity-level`);
    let finalWidth;
    let finalMargin;
    let initialWidth
    let marginModifier = 1.4;
    let widthModifier;
    let count = 0;

// set quantity controller
    elementQuantity = nodes;
    value.innerHTML = nodes;

if (nodes < 7) {
        initialWidth = 100;
        widthModifier = 23;
    }
    if (nodes > 6 && nodes < 13) {
        initialWidth = 80;
        widthModifier = 16;
    }
    if (nodes > 12 && nodes < 18) {
        initialWidth = 60;
        widthModifier = 10;
    }
    if (nodes > 17 && nodes < 21) {
        initialWidth = 30;
        widthModifier = 10;
    }

for (let i = 0; i < nodes; i++) {
        count++;
        finalWidth = widthModifier * count + initialWidth;
        finalMargin = finalWidth / marginModifier;
        let z = element.getElementsByClassName('card-common')[i];
        z.style.width = `${finalWidth}px`;
        z.style.margin = `0 -${finalMargin}px 0 0`;
    }
}

function setInteractiveElements() {
    let element = document.getElementById("dof-container"); // target container
    let nodes = element.getElementsByClassName('card-common'); // target elements in container

// Adds 'reveal' class to all elements in dof-container except last element
    // as there is no need for the last element to dodge left to reveal itself
    for (let i = 0; i < (nodes.length - 1); i++) {
        let z = nodes[i];
        classAttribute = z.getAttribute("class");
        console.log(`class = ${classAttribute}`)

// Check if element already has the class attribute value of "reveal"
        if (classAttribute.includes("reveal")) {} else {
            z.className += " reveal";
        }
    }

// Adds and sets onmouseover attribute to all elements in dof-container
    for (let i = 0; i < nodes.length; i++) {
        let z = nodes[i];
        let attribute = document.createAttribute("onmouseover");
        attribute.value = "getChildNodeIndex(this);";
        z.setAttributeNode(attribute);
    }
}

// Picks a random number from 0 to the number of nodes in the container.
// This value is used to set an initial random 'focus' point on page load
function generateRandomIndex() {
    let element = document.getElementById("dof-container"); // target container
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    let randomIndex = Math.floor(Math.random() * (0 - nodes) + nodes);
    targetElement = randomIndex;
    generateDepthOfField(randomIndex);
}

// Takes the selected child node's index as parameter, then executes the appropriate blur method
function generateDepthOfField(childIndex, handshake) {
    let element = document.getElementById("dof-container");
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    let blurLevel = document.getElementById(`blur-level`);
    let countOne = -1;
    let countTwo = -1;
    let above = [];
    let below = [];
    let blur;
    let blurState;
    let blurModifier;

// Blur settings
    if (manualBlur == null) {
        if (nodes < 7) {
            blurModifier = 2;
            blurLevel.innerHTML = blurModifier;
        }
        if (nodes > 6 && nodes < 13) {
            blurModifier = 2;
            blurLevel.innerHTML = blurModifier;
        }
        if (nodes > 12) {
            blurModifier = .5;
            blurLevel.innerHTML = blurModifier;
        }
    }
    if (manualBlur > -1) {
        blurModifier = manualBlur;
    }

// the following for loops blur elements above and below the
    // target element in increasing increments set in one of the above if statements
    for (let i = childIndex; i > -1; i--) {
        countOne++;
        blur = blurModifier * countOne;
        let z = element.getElementsByClassName(`card-common`)[i];
        z.style.filter = `blur(${blur}px)`;
        if (blur != 0) {
            below.push(blur);
        }
    }
    for (let i = childIndex; i < nodes; i++) {
        countTwo++;
        blur = blurModifier * countTwo;
        let z = element.getElementsByClassName(`card-common`)[i];
        z.style.filter = `blur(${blur}px)`;
        if (blur != 0) {
            above.push(blur);
        }
    }

if ((above.length + below.length) == (nodes - 1)) {
        blurState = below.concat(0, above);
        currentDepth = blurState;
        if (handshake = 1) {
            setTimeout(function() {
                createDepthArray(targetElement);
            }, 150);
        }
    }
}

// Get index of targeted element within the dof-container
function getChildNodeIndex(target) {
    let container = target.parentNode;
    let childList = container.childNodes;
    // console.log(child_list);
    let count = -1;

// Step through all the child childNodes of the parent
    for (let i = 0; i < childList.length; i++) {
        let node = childList.item(i);
        if (node) {
            // Check to see if the node is a LI
            if (node.nodeName == `IMG`) {
                // Increment the count of LI childNodes
                count++;
                if (target == node) {
                    // If so, pass count to generateDepthOfField()
                    targetElement = count;
                    createDepthArray(count);
                }
            }
        }
    }
}

// creates an array containing the blur values for each element in the container
function createDepthArray(childIndex) {
    let element = document.getElementById("dof-container");
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    let countOne = -1;
    let countTwo = -1;
    let above = [];
    let below = [];
    let blur;
    let blurState;
    let blurModifier;

// Blur settings
    if (nodes < 7) {
        blurModifier = 3;
    }
    if (nodes > 6 && nodes < 13) {
        blurModifier = 2;
    }
    if (nodes > 12) {
        blurModifier = 1;
    }

for (let i = childIndex; i > -1; i--) {
        countOne++;
        blur = blurModifier * countOne;
        if (blur != 0) {
            below.push(blur);
        }
    }
    for (let i = childIndex; i < nodes; i++) {
        countTwo++;
        blur = blurModifier * countTwo;
        if (blur != 0) {
            above.push(blur);
        }
    }
    if ((above.length + below.length) == (nodes - 1)) {
        let reverseBelow = below.reverse();
        blurState = below.concat(0, above);
        arrayTransform(blurState);
    }
}

function arrayTransform(targetState) {
    let handshake = 1;
    let element = document.getElementById("dof-container"); // target container
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    // let targetState = x;

// Find index of 0 [focus point] in each array
    let current = currentDepth.indexOf(0);
    let target = targetState.indexOf(0);

// increase index of 0 by 1
    if (current < target) {
        current = current + 1;
        generateDepthOfField(current, handshake);
    }
    // decrease index of 0 by 1
    if (current > target) {
        current = current - 1;
        generateDepthOfField(current, handshake);
    }
}

// Depth of Field Controls
function increaseDepth() {
    let value = document.getElementById(`blur-level`);
    x = Number(value.innerHTML);
    // increment depth of field intensity by .5
    value.innerHTML = x + .5;
    manualBlur = value.innerHTML
    generateDepthOfField(targetElement);
}

function decreaseDepth() {
    let value = document.getElementById(`blur-level`);
    x = Number(value.innerHTML);
    // decrement depth of field intensity by .5
    if (x > 0) {
        value.innerHTML = x - .5;
        manualBlur = value.innerHTML
        generateDepthOfField(targetElement);
    }
}

// Card quantity controls
function increaseQuantity() {
    let element = document.getElementById('dof-container');
    let nodes = element.getElementsByClassName('card-common').length; // target elements in container
    let value = document.getElementById(`quantity-level`);
    let newElement = document.createElement("img");
    let srcAttribute = document.createAttribute("src");
    let classAttribute = document.createAttribute("class");

// Add new elements. Hard cap of 20 elements total
    if (nodes <= 19) {
        srcAttribute.value = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/707108/joker.png";
        classAttribute.value = "card-common";
        newElement.setAttributeNode(srcAttribute);
        newElement.setAttributeNode(classAttribute)
        element.appendChild(newElement);

targetElement = nodes;

// Reinitialize all
        setPerspective();
        setInteractiveElements();
        generateDepthOfField(targetElement);
        console.log(`current target = ${targetElement}`);
    }
}

function decreaseQuantity() {
    let value = document.getElementById(`quantity-level`);
    let element = document.getElementById("dof-container");
    let nodes = element.getElementsByClassName('card-common');

// If the number of elements is greater than 0
    if (nodes.length > 0) {
        element.removeChild(nodes[0]);
        value.innerHTML--;

targetElement = nodes.length - 1;
        console.log(`nodes.length = ${nodes.length}`);

// Reinitialize remaining elements
        setPerspective();
        generateDepthOfField(targetElement);
    }
}

编译

CSS

body {
    background: hsl(213, 8%, 40%);
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
}
.container {
    display: flex;
    flex-direction: row;
    transition: all .5s ease;
    perspective: 200px;
    height: 100vh;
}
.card-common {
    align-self: center;
    cursor: pointer;
    box-shadow: -10px 0 30px -10px hsla(0, 0%, 0%, 0.45);
    transition: all .15s linear;
    transform: rotateY(5deg);
}
/* clicked elements in dof-container dodge left to fully reveal themselves */

.reveal:active {
    padding-right: 6em;
    transform: rotateZ(0deg);
    box-shadow: none;
}
/* Blur Controls */

.blur-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 1em;
    right: 1em;
    box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
    z-index: 2;
}
.controls-header {
    color: white;
    font-size: 15px;
    background: hsl(2, 49%, 56%);
    padding: 5px;
    margin: 0;
}
.controls {
    display: flex;
    flex-direction: row;
    height: 40px;
}
.control-button {
    width: 50px;
    font-size: 30px;
    line-height: 40px;
    background: hsl(216, 14%, 24%);
    border: none;
    cursor: pointer;
    color: white;
    margin: 0;
    padding: 0;
}
.blur-button:hover {
    background: hsl(216, 14%, 44%);
}
.indicator {
    background: hsl(219, 15%, 15%);
    width: 80px;
    color: white;
    font-size: 20px;
    text-align: center;
    line-height: 40px;
}
/* Card controller */

.quantity-container {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 1em;
    left: 1em;
    box-shadow: 0 0 20px 0 hsla(0, 0%, 0%, 0.66);
    z-index: 2;
}

HTML

<div class="quantity-container">
    <p class="controls-header">Card quantity</p>
    <div class="controls">
        <button class="control-button" onclick="decreaseQuantity();">-</button>
        <div id="quantity-level" class="indicator"></div>
        <button class="control-button" onclick="increaseQuantity();">+</button>
    </div>
</div>
<div class="blur-container">
    <p class="controls-header">DOF Control</p>
    <div class="controls">
        <button class="control-button" onclick="decreaseDepth();">-</button>
        <div id="blur-level" class="indicator"></div>
        <button class="control-button" onclick="increaseDepth();">+</button>
    </div>
</div>
<div id="dof-container" class="container">
    <img src="/uploads/161001/kate-moss.png" class="card-common" />
    <img src="/uploads/161001/miranda-kerr.png" class="card-common" />
    <img src="/uploads/161001/kate-moss.png" class="card-common" />
    <img src="/uploads/161001/aline-weber_copy.png" class="card-common" />
    <img src="/uploads/161001/karlie-kloss.png" class="card-common" />
    <img src="/uploads/161001/miranda-kerr-color.png" class="card-common" />
</div>

Interactive dynamic depth of field

html5, dof

编辑器支持Emmet

快捷键

Interactive dynamic depth of field

html5, dof

HTML5 Canvas背景虚化（散景）动画特效

美轮美奂的HTML5/Canvas散影（焦外成像）背景动画特效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：