CardMove

Developer
Emerson Thompson
Size
3,699 Kb
Views
54,648
  1. CardMove Previews
  2. CardMove HTML Codes
  3. CardMove CSS Codes
  4. CardMove JS Codes

How do I make an cardmove?

What is a cardmove? How do you make a cardmove? This script and codes were developed by Emerson Thompson on 11 August 2022, Thursday.

CardMove Previews
IQ Test

CardMove - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CardMove</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="card-item"> <div class="card-content">CardMove</div>
</div>
<div class="card-item" data-card-angle="100"> <div class="card-content">CardMove</div>
</div>
<div class="card-item" data-card-horizontal="false"> <div class="card-content">CardMove</div>
</div> <script src="js/index.js"></script>
</body>
</html>

CardMove - Script Codes CSS Codes

html,
body { width: 100%; height: 100%;
}
body { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center;
}
.card-item + .card-item { margin-left: 30px;
}
.card-content { width: 250px; height: 250px; color: #ffffff; line-height: 250px; text-align: center; font-size: 1.4em; cursor: pointer;
}
.card-item:nth-child(1) .card-content { background: -webkit-linear-gradient(54deg, #8bc34a, #cddc39); background: linear-gradient(36deg, #8bc34a, #cddc39);
}
.card-item:nth-child(2) .card-content { background: -webkit-linear-gradient(54deg, #03a9f4, #3f51b5); background: linear-gradient(36deg, #03a9f4, #3f51b5);
}
.card-item:nth-child(3) .card-content { background: -webkit-linear-gradient(54deg, #9c27b0, #223971); background: linear-gradient(36deg, #9c27b0, #223971);
}

CardMove - Script Codes JS Codes

/*! * CardMove v1.0.0 * https://github.com/thompsonemerson/cardmove * * Licensed MIT © Emerson Thompson */
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.CardMove=e()}}(function(){var e,t,n;return function e(t,n,r){function o(s,f){if(!n[s]){if(!t[s]){var a="function"==typeof require&&require;if(!f&&a)return a(s,!0);if(i)return i(s,!0);var u=new Error("Cannot find module '"+s+"'");throw u.code="MODULE_NOT_FOUND",u}var l=n[s]={exports:{}};t[s][0].call(l.exports,function(e){var n=t[s][1][e];return o(n?n:e)},l,l.exports,e,t,n,r)}return n[s].exports}for(var i="function"==typeof require&&require,s=0;s<r.length;s++)o(r[s]);return o}({1:[function(t,n,r){!function(t,o){if("function"==typeof e&&e.amd)e(["module"],o);else if("undefined"!=typeof r)o(n);else{var i={exports:{}};o(i),t.cardmove=i.exports}}(this,function(e){"use strict";function t(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var n=function(){function e(e,t){for(var n=0;n<t.length;n++){var r=t[n];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}}(),r=function(){function e(n,r){t(this,e),this.resolveOptions(r),this.listenMove(n)}return n(e,[{key:"resolveOptions",value:function e(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:{};this.angle="number"==typeof t.angle?t.angle:30,this.perspective="number"==typeof t.perspective?t.perspective:300,this.horizontal="boolean"!=typeof t.horizontal||t.horizontal,this.vertical="boolean"!=typeof t.vertical||t.vertical,this.speed="number"==typeof t.speed?t.speed:500}},{key:"listenMove",value:function e(t){var n=this,r=document.querySelectorAll(t);r.forEach(function(e,t){return n.onMove(e)})}},{key:"onMove",value:function e(t){var n=t.querySelector(".card-content"),r="number"==typeof this.getAttr(t,"angle")?this.getAttr(t,"angle"):this.angle,o="number"==typeof this.getAttr(t,"perspective")?this.getAttr(t,"perspective"):this.perspective,i="boolean"==typeof this.getAttr(t,"horizontal")?this.getAttr(t,"horizontal"):this.horizontal,s="boolean"==typeof this.getAttr(t,"vertical")?this.getAttr(t,"vertical"):this.vertical,f="number"==typeof this.getAttr(t,"speed")?this.getAttr(t,"speed"):this.speed;n.style.transition="all "+f+"ms cubic-bezier(.40, .575, .565, 1)",t.addEventListener("mouseout",function(e){n.style.transform="perspective("+o+"px)\n rotateY(0deg)\n rotateX(0deg)"}),t.addEventListener("mousemove",function(e){var f=t.clientWidth,a=t.clientHeight,u=s?(1-(e.offsetY-.5*a))/a*r:0,l=i?(e.offsetX-.5*f)/f*r:0;n.style.transform="perspective("+o+"px)\n rotateX("+u+"deg)\n rotateY("+l+"deg)"})}},{key:"getAttr",value:function e(t,n){if(n="data-card-"+n,t.hasAttribute(n))return JSON.parse(t.getAttribute(n))}}]),e}();e.exports=r})},{}]},{},[1])(1)});
new CardMove('.card-item');
CardMove - Script Codes
CardMove - Script Codes
Home Page Home
Developer Emerson Thompson
Username thompsonemerson
Uploaded August 11, 2022
Rating 3
Size 3,699 Kb
Views 54,648
Do you need developer help for CardMove?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Emerson Thompson (thompsonemerson) Script Codes
Name
Custom Audio Player with YouTube API
A Pen by Emerson Thompson
Reactions Facebook
Hello World - ReactJS
Logo Hover Animate CSS3
Hashtag Instagram - AngularJS
Only One Checkbox Selected
UI Elements - Flat Design
Filtro de palavras com JavaScript
Render List with React
Create amazing art & images with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!