Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Text-animation #220

Merged
merged 1 commit into from
Oct 26, 2020
Merged

Text-animation #220

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/3D-Card/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
# 3-D Card Animation

### <p> The script portrays 3D animation that can be done using js. <br/> Here is an example: </p> <br />

![Image](image.gif)

Note: The nike shoe is used just for example.
Binary file added Web Hacks/Animations/m4Dummies-Animations/3D-Card/image.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 34 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/3D-Card/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3d Card Effect</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="card">
<div class="sneaker">
<div class="circle"></div>
<img src="./nike.png" alt="Nike Sacai">
</div>
<div class="info">
<h1 class="title">Nike Sacai</h1>
<h3>JUST DO IT. SNEAKERS MADE FOR THE BEST, BY THE BEST</h3>
<div class="sizes">
<button>39</button>
<button>40</button>
<button class="active">42</button>
<button>44</button>
</div>
<div class="purchase">
<button>Purchase</button>
</div>
</div>
</div>
</div>
<script src="./script.js"></script>
</body>
</html>
37 changes: 37 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/3D-Card/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
const card = document.querySelector('.card');
const container = document.querySelector('.container');
const title = document.querySelector('.title');
const sneaker = document.querySelector('.sneaker img');
const purchase = document.querySelector('.purchase button');
const desc = document.querySelector('.info h3');
const sizes = document.querySelector('.sizes');


container.addEventListener('mousemove', (e) => {
let xAxis = (window.innerWidth / 2 - e.pageX) / 20;
let yAxis = (window.innerHeight / 2 - e.pageY) / 20;
card.style.transform = `rotateY(${xAxis}deg) rotateX(${yAxis}deg)`;
})


//animate in
container.addEventListener('mouseenter', e=> {
card.style.transition = 'none';
title.style.transform = 'translateZ(150px)'
sneaker.style.transform = 'translateZ(250px) rotateZ(-45deg)'
desc.style.transform = 'translateZ(125px)'
sizes.style.transform = 'translateZ(100px)'
purchase.style.transform = 'translateZ(75px)'
})


//animate out
container.addEventListener('mouseleave', e => {
card.style.transition = 'all 0.5s ease';
card.style.transform = `rotateY(0deg) rotateX(0deg)`
title.style.transform = 'translateZ(0px)'
sneaker.style.transform = 'translateZ(0px) rotateZ(0deg)'
desc.style.transform = 'translateZ(0px)'
sizes.style.transform = 'translateZ(0px)'
purchase.style.transform = 'translateZ(0px)'
})
97 changes: 97 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/3D-Card/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
font-family: "Poppins", sans-serif;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1000px;
}
.container {
width: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.card {
transform-style: preserve-3d;
min-height: 80vh;
width: 35rem;
border-radius: 30px;
padding: 0rem 5rem;
box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2), 0px 0px 50px rgba(0, 0, 0, 0.2);
}

.sneaker {
min-height: 35vh;
display: flex;
align-items: center;
justify-content: center;
}
.sneaker img {
width: 20rem;
z-index: 2;
transition: all 0.75s ease-out;
}
.circle {
width: 15rem;
height: 15rem;
background: linear-gradient(
to right,
rgba(239, 113, 38, 1),
rgba(142, 220, 157, 1)
);
position: absolute;
border-radius: 50%;
z-index: 1;
}

.info h1 {
font-size: 3rem;
transition: all 0.75s ease-out;
}
.info h3 {
font-size: 1.3rem;
padding: 2rem 0rem;
color: #585858;
font-weight: lighter;
transition: all 0.75s ease-out;
}
.sizes {
display: flex;
justify-content: space-between;
transition: all 0.75s ease-out;
}
.sizes button {
padding: 0.5rem 2rem;
background: none;
border: none;
box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
border-radius: 30px;
cursor: pointer;
font-weight: bold;
color: #585858;
}
button.active {
background: #585858;
color: white;
}
.purchase {
margin-top: 5rem;
transition: all 0.75s ease-out;
}
.purchase button {
width: 100%;
padding: 1rem 0rem;
background: #f54642;
border: none;
color: white;
cursor: pointer;
border-radius: 30px;
font-weight: bolder;
}
5 changes: 5 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/text-anim/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
# Text Animation

### This animation portrays a text animation desigined in javascript.

![Image](text-anim.gif)
13 changes: 13 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/text-anim/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Animation</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1 class="fancy">m4dummies Animation</h1>
<script src="script.js"></script>
</body>
</html>
30 changes: 30 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/text-anim/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
const text = document.querySelector('.fancy');
const stringText = text.textContent;
const splitText = stringText.split("");
text.textContent = "";

for(let i=0; i < splitText.length; i++)
{
text.innerHTML += "<span>" + splitText[i] + "</span>";
}


let char = 0;
let timer = setInterval(onTick, 50);

function onTick() {
const span = text.querySelectorAll('span')[char];
span.classList.add('fade');
char++
if(char == splitText.length){
complete();
return;
}
}

function complete(){
cleanInterval(timer);
timer = null;
}

console.log(splitText);
29 changes: 29 additions & 0 deletions Web Hacks/Animations/m4Dummies-Animations/text-anim/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
*{
margin:0;
padding:0;
box-sizing: border-box;
}

body{
background: black;
}

h1{
color: white;
font-size: 4rem;
font-family: sans-serif;
text-align: center;
line-height: 100vh;
}

span {
opacity: 0;
transition: all 0.5s ease;
transform: translateY(50px);
display: inline-block;
}

span.fade{
opacity: 1;
transform: translateY(0px);
}
Binary file added Web Hacks/Animations/m4Dummies-Animations/text-anim/text-anim.gif
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.