Springy popup card

Developer
Srijon Sarker
Size
5,149 Kb
Views
10,120
  1. Springy popup card Previews
  2. Springy popup card HTML Codes
  3. Springy popup card CSS Codes
  4. Springy popup card JS Codes

How do I make an springy popup card?

Click it!I just wanted to have a play around with Rebound.js with this one, so there's not much to the functionality.. What is a springy popup card? How do you make a springy popup card? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Springy popup card Previews
IQ Test

Springy popup card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Springy popup card</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Roboto+Condensed'> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="popup-container" id="popup-container" touch-action="none"> <div class="popup" id="popup"> <div class="popup__content lory"> <div class="lory__frame"> <ul class="lory__slides"> <li class="lory__slide slide--blue"></li> <li class="lory__slide slide--teal"></li> <li class="lory__slide slide--green"></li> <li class="lory__slide slide--yellow"></li> <li class="lory__slide slide--orange"></li> <li class="lory__slide slide--red"></li> <li class="lory__slide slide--purple"></li> <li class="lory__slide slide--indigo"></li> </ul> </div><a class="next lory__next"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">	<path d="M0 0l10 15L0 30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg></a><a class="previous lory__previous"> <svg xmlns="http://www.w3.org/2000/svg" width="12" height="32" viewBox="-1 -1 12 32">	<path d="M 10,0 0,15 10,30" fill="none" stroke="#fff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/> </svg></a> </div> <div class="popup__buttons"><a class="button">Cancel</a><a class="button">Select</a></div> </div>
</div> <script src='https://cdn.rawgit.com/facebook/rebound-js/fe8994c1caca9f0e7ff27336c5ecf0a4abd807dc/rebound.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.4/hammer.min.js'></script>
<script src='https://code.jquery.com/pep/0.3.0/pep.js'></script>
<script src='https://cdn.rawgit.com/meandmax/lory/v1.6.6/dist/lory.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Springy popup card - Script Codes CSS Codes

body { background: #e6e6e6; font-family: 'Roboto Condensed', Roboto, sans-serif; font-size: 16px; font-weight: 400;
}
.popup-container { -webkit-perspective: 1000px; perspective: 1000px; width: 300px; margin: 50px auto; -ms-touch-action: none; touch-action: none;
}
.popup { width: 100%; overflow: hidden; background: white; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}
.popup__content { display: block; width: 100%; height: 200px; position: relative;
}
.popup__content .next,
.popup__content .previous { display: block; width: 48px; height: 100px; position: absolute; top: 50%; margin-top: -50px; cursor: pointer;
}
.popup__content .next svg,
.popup__content .previous svg { position: absolute; top: 50%; left: 50%; display: block; margin: -16px -6px; pointer-events: none;
}
.popup__content .previous { left: 0;
}
.popup__content .next { right: 0;
}
.popup__buttons { height: 72px;
}
.popup__buttons .button { display: inline-block; box-sizing: border-box; width: 50%; line-height: 72px;
}
.button { text-align: center; text-transform: uppercase; color: #333; cursor: pointer; -webkit-transition: color, background-color; transition: color, background-color; -webkit-transition-duration: 0.2s; transition-duration: 0.2s;
}
.button:hover { background: rgba(0, 0, 0, 0.05);
}
.button:active { background: rgba(0, 0, 0, 0.1);
}
.slide--blue { background: #4fc3f7;
}
.slide--teal { background: #4db6ac;
}
.slide--green { background: #aed581;
}
.slide--yellow { background: #fff176;
}
.slide--orange { background: #ffb74d;
}
.slide--red { background: #e57373;
}
.slide--purple { background: #9575cd;
}
.slide--indigo { background: #5c6bc0;
}
.lory__frame { position: relative; width: 100%; height: 100%; font-size: 0; overflow: hidden; white-space: nowrap;
}
.lory__slides { display: inline-block; width: 100%; height: 100%;
}
.lory__slide { position: relative; display: inline-block; width: 100%; height: 100%;
}

Springy popup card - Script Codes JS Codes

(function() {	var popup = document.getElementById('popup');	var popupContainer = document.getElementById('popup-container');	var springSystem = new rebound.SpringSystem();	var spring = springSystem.createSpring(35, 3);	var force = {x: 0, y: 0};	var pressStart = {x: 0, y: 0};	//var pressed = false;	spring.addListener({	onSpringUpdate: function(spr) {	var val = spr.getCurrentValue();	rot = rebound.MathUtil.mapValueInRange(val, 0, 1, 0, 40);	var transform = 'rotateX(' + rot * force.y / 3 + 'deg) '	+ 'rotateY(' + rot * force.x + 'deg)';	var vendors = ['Webkit', 'Moz', 'ms'];	for(var vendor in vendors) {	popup.style[vendors[vendor] + 'Transform'] = transform;	}	}	});	function updateRotation(relX, relY) {	var rect = popup.getBoundingClientRect();	var x = Math.max(Math.min(relX, rect.width), 0);	var y = Math.max(Math.min(relY, rect.height), 0);	force.x = (x/rect.width) - 0.5;	force.y = -((y/rect.height) - 0.5);	spring.setEndValue(Math.max(Math.abs(force.x), Math.abs(force.y)));	//spring.setEndValue(Math.sqrt(Math.pow(Math.abs(force.x), 2) + Math.abs(Math.abs(force.y), 2)));	}	var hammertime = new Hammer(popupContainer);	hammertime.get('pan').set({ threshold: 0 });	popupContainer.addEventListener('pointerdown', function(ev) {	//ev.preventDefault();	var rect = popup.getBoundingClientRect();	pressStart.x = ev.pageX - (rect.left + document.body.scrollLeft);	pressStart.y = ev.pageY - (rect.top + document.body.scrollTop);	updateRotation(pressStart.x, pressStart.y);	});	hammertime.on('panmove', function(ev) {	updateRotation(pressStart.x + ev.deltaX, pressStart.y + ev.deltaY);	});	hammertime.on('panend pancancel', function(ev) {	spring.setEndValue(0);	});	popupContainer.addEventListener('pointerup', function(ev) {	spring.setEndValue(0);	});	var sliderEl = document.querySelector('.lory');	var slider = lory(sliderEl, {	infinite: 1,	classNameFrame: 'lory__frame',	classNameSlideContainer: 'lory__slides',	classNamePrevCtrl: 'lory__previous',	classNameNextCtrl: 'lory__next'	});	var mcSliderPrev = new Hammer.Manager(slider.querySelector('.lory__previous'));	mcSliderPrev.add( new Hammer.Tap());	mcSliderPrev.on("tap", function() {	slider.prev();	});	var mcSliderNext = new Hammer.Manager(slider.querySelector('.lory__next'));	mcSliderPrev.add( new Hammer.Tap());	mcSliderPrev.on("tap", function() {	slider.next();	});
})();
Springy popup card - Script Codes
Springy popup card - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3.5
Size 5,149 Kb
Views 10,120
Do you need developer help for Springy popup card?

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!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Material Design Author Quote
Flat Pricing Table
Panels and Bullets
Calendar Widget
Visual Card
Lead Gen Button
Statics UI
Material Design Square Card Components
My Profile Card
Catagory Choosing
Create amazing web content 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!