A Pen by Theun

Developer
Size
6,152 Kb
Views
40,480

How do I make an a pen by theun?

What is a a pen by theun? How do you make a a pen by theun? This script and codes were developed by Theun on 23 July 2022, Saturday.

A Pen by Theun Previews

A Pen by Theun - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>A Pen by Theun</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="Collage effect-parent"> <img src="http://placehold.it/350x150/69D2E7/ffffff"><img src="http://placehold.it/320x180/A7DBD8/ffffff"><img src="http://placehold.it/320x300/E0E4CC/ffffff"><img src="http://placehold.it/472x500/F38630/ffffff"><img src="http://placehold.it/540x360/FA6900/ffffff"><img src="http://placehold.it/800x600/ECD078/ffffff"><img src="http://placehold.it/400x120/D95B43/ffffff"><img src="http://placehold.it/300x300/C02942/ffffff"><img src="http://placehold.it/320x500/542437/ffffff"><img src="http://placehold.it/450x300/53777A/ffffff"></div>
<p class="footnote"><a href="http://ed-lea.github.io/jquery-collagePlus/">CollagePlus</a> for jQuery by <a href="http://twitter.com/ed_lea">@ed_lea</a></p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://dimsemenov-static.s3.amazonaws.com/dist/jquery.magnific-popup.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

A Pen by Theun - Script Codes CSS Codes

body{ background-color:#eee;
}
.Collage img{ opacity:0; box-shadow:0px 3px 4px #dcdcdc; border-radius: 6px; /* * Change this to try different borders */ border:6px solid #FFF;
} .Collage{ /* * Change this to set the spacing of the images in the grid */ padding:10px; } .footnote{ font-family:arial; color:#999; padding:10px; font-size:12px; } .footnote a{ color:#09f; text-decoration:none; }
/* from transitions.css */
/*
A library of transitions for revealing the loaded images
(Heavily) Inspired by http://tympanus.net/codrops/2013/07/02/loading-effects-for-grid-items-with-css-animations/
*/
.effect-parent { -webkit-perspective: 1300px; -moz-perspective: 1300px; perspective: 1300px; }
/* EFFECT 1 */
.effect-1 { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% -300px; -moz-transform-origin: 50% 50% -300px; transform-origin: 50% 50% -300px; -webkit-transform: rotateX(-180deg); -moz-transform: rotateX(-180deg); transform: rotateX(-180deg); -webkit-animation: fly ease-in-out forwards; -moz-animation: fly ease-in-out forwards; animation: fly ease-in-out forwards;
}
@-webkit-keyframes fly { 100% { -webkit-transform: rotateX(0deg); opacity: 1; -webkit-transform-origin:50% 50% 0; }
}
@-moz-keyframes fly { 100% { -moz-transform: rotateX(0deg); opacity: 1; -moz-transform-origin:50% 50% 0; }
}
@keyframes fly { 100% { transform: rotateX(0deg); opacity: 1; transform-origin:50% 50% 0; }
}
/* EFFECT 2 */
.effect-2 { -webkit-transform: translateY(200px); -moz-transform: translateY(200px); transform: translateY(200px); -webkit-animation: moveUp ease forwards; -moz-animation: moveUp ease forwards; animation: moveUp ease forwards;
}
@-webkit-keyframes moveUp { to { -webkit-transform: translateY(0); opacity: 1; }
}
@-moz-keyframes moveUp { to { -moz-transform: translateY(0); opacity: 1; }
}
@keyframes moveUp { to { transform: translateY(0); opacity: 1; }
}
/* EFFECT 3 */
.effect-3 { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(400px) translateY(300px) rotateX(-90deg); -moz-transform: translateZ(400px) translateY(300px) rotateX(-90deg); transform: translateZ(400px) translateY(300px) rotateX(-90deg); -webkit-animation: fallPerspective ease-in-out forwards; -moz-animation: fallPerspective ease-in-out forwards; animation: fallPerspective ease-in-out forwards;
}
@-webkit-keyframes fallPerspective { 100% { -webkit-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@-moz-keyframes fallPerspective { 100% { -moz-transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
@keyframes fallPerspective { 100% { transform: translateZ(0px) translateY(0px) rotateX(0deg); opacity: 1; }
}
/* EFFECT 4 */
.effect-4 { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: rotateX(-80deg); -moz-transform: rotateX(-80deg); transform: rotateX(-80deg); -webkit-animation: flip ease-in-out forwards; -moz-animation: flip ease-in-out forwards; animation: flip ease-in-out forwards;
}
@-webkit-keyframes flip { 100% { -webkit-transform: rotateX(0deg); opacity: 1; }
}
@-moz-keyframes flip { 100% { -moz-transform: rotateX(0deg); opacity: 1; }
}
@keyframes flip { 100% { transform: rotateX(0deg); opacity: 1; }
}
/* EFFECT 5 */
.effect-5 { -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: rotateY(-180deg); -moz-transform: rotateY(-180deg); transform: rotateY(-180deg); -webkit-animation: moveUp ease-in-out forwards; -moz-animation: moveUp ease-in-out forwards; animation: moveUp ease-in-out forwards;
}
/* EFFECT 6 */
.effect-6 { -webkit-transform: scale(0.638) translate(-179px); -moz-transform: scale(0.638) translate(-179px); transform: scale(0.638) translate(-179px); -webkit-animation: moveUp ease-in-out forwards; -moz-animation: moveUp ease-in-out forwards; animation: moveUp ease-in-out forwards;
}
/* Universal durations */
.effect-duration-1{ -webkit-animation-duration: .4s; -moz-animation-duration: .4s; animation-duration: .4s;
}
.effect-duration-2{ -webkit-animation-duration: .5s; -moz-animation-duration: .5s; animation-duration: .5s;
}
.effect-duration-3{ -webkit-animation-duration: .6s; -moz-animation-duration: .6s; animation-duration: .6s;
}
.effect-duration-4{ -webkit-animation-duration: .7s; -moz-animation-duration: .7s; animation-duration: .7s;
}
.effect-duration-5{ -webkit-animation-duration: .8s; -moz-animation-duration: .8s; animation-duration: .8s;
}
.effect-duration-6{ -webkit-animation-duration: .9s; -moz-animation-duration: .9s; animation-duration: .9s;
}
.effect-duration-7{ -webkit-animation-duration: .95s; -moz-animation-duration: .95s; animation-duration: .95s;
}
.effect-duration-8{ -webkit-animation-duration: 1s; -moz-animation-duration: 1s; animation-duration: 1s;
}
.effect-duration-9{ -webkit-animation-duration: 1.05s; -moz-animation-duration: 1.05s; animation-duration: 1.05s;
}
.effect-duration-10{ -webkit-animation-duration: 1.1s; -moz-animation-duration: 1.1s; animation-duration: 1.1s;
}
/* Magnific Popup CSS */
.mfp-bg { top: 0; left: 0; width: 100%; height: 100%; z-index: 1042; overflow: hidden; position: fixed; background: #0b0b0b; opacity: 0.8; filter: alpha(opacity=80); }
.mfp-wrap { top: 0; left: 0; width: 100%; height: 100%; z-index: 1043; position: fixed; outline: none !important; -webkit-backface-visibility: hidden; }
.mfp-container { text-align: center; position: absolute; width: 100%; height: 100%; left: 0; top: 0; padding: 0 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.mfp-container:before { content: ''; display: inline-block; height: 100%; vertical-align: middle; }
.mfp-align-top .mfp-container:before { display: none; }
.mfp-content { position: relative; display: inline-block; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; }
.mfp-inline-holder .mfp-content,
.mfp-ajax-holder .mfp-content { width: 100%; cursor: auto; }
.mfp-ajax-cur { cursor: progress; }
.mfp-zoom-out-cur,
.mfp-zoom-out-cur .mfp-image-holder .mfp-close { cursor: -moz-zoom-out; cursor: -webkit-zoom-out; cursor: zoom-out; }
.mfp-zoom { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; cursor: zoom-in; }
.mfp-auto-cursor .mfp-content { cursor: auto; }
.mfp-close,
.mfp-arrow,
.mfp-preloader,
.mfp-counter { -webkit-user-select: none; -moz-user-select: none; user-select: none; }
.mfp-loading.mfp-figure { display: none; }
.mfp-hide { display: none !important; }
.mfp-preloader { color: #cccccc; position: absolute; top: 50%; width: auto; text-align: center; margin-top: -0.8em; left: 8px; right: 8px; z-index: 1044; }
.mfp-preloader a { color: #cccccc; }
.mfp-preloader a:hover { color: white; }
.mfp-s-ready .mfp-preloader { display: none; }
.mfp-s-error .mfp-content { display: none; }
button.mfp-close,
button.mfp-arrow { overflow: visible; cursor: pointer; background: transparent; border: 0; -webkit-appearance: none; display: block; padding: 0; z-index: 1046; -webkit-box-shadow: none; box-shadow: none; }
button::-moz-focus-inner { padding: 0; border: 0; }
.mfp-close { width: 44px; height: 44px; line-height: 44px; position: absolute; right: 0; top: 0; text-decoration: none; text-align: center; opacity: 0.65; padding: 0 0 18px 10px; color: white; font-style: normal; font-size: 28px; font-family: Arial, Baskerville, monospace; } .mfp-close:hover, .mfp-close:focus { opacity: 1; } .mfp-close:active { top: 1px; }
.mfp-close-btn-in .mfp-close { color: #333333; }
.mfp-image-holder .mfp-close,
.mfp-iframe-holder .mfp-close { color: white; right: -6px; text-align: right; padding-right: 6px; width: 100%; }
.mfp-counter { position: absolute; top: 0; right: 0; color: #cccccc; font-size: 12px; line-height: 18px; }
.mfp-arrow { position: absolute; opacity: 0.65; margin: 0; top: 50%; margin-top: -55px; padding: 0; width: 90px; height: 110px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
.mfp-arrow:active { margin-top: -54px; }
.mfp-arrow:hover,
.mfp-arrow:focus { opacity: 1; }
.mfp-arrow:before, .mfp-arrow:after,
.mfp-arrow .mfp-b,
.mfp-arrow .mfp-a { content: ''; display: block; width: 0; height: 0; position: absolute; left: 0; top: 0; margin-top: 35px; margin-left: 35px; border: medium inset transparent; }
.mfp-arrow:after,
.mfp-arrow .mfp-a { border-top-width: 13px; border-bottom-width: 13px; top: 8px; }
.mfp-arrow:before,
.mfp-arrow .mfp-b { border-top-width: 21px; border-bottom-width: 21px; }
.mfp-arrow-left { left: 0; } .mfp-arrow-left:after, .mfp-arrow-left .mfp-a { border-right: 17px solid white; margin-left: 31px; } .mfp-arrow-left:before, .mfp-arrow-left .mfp-b { margin-left: 25px; border-right: 27px solid #3f3f3f; }
.mfp-arrow-right { right: 0; } .mfp-arrow-right:after, .mfp-arrow-right .mfp-a { border-left: 17px solid white; margin-left: 39px; } .mfp-arrow-right:before, .mfp-arrow-right .mfp-b { border-left: 27px solid #3f3f3f; }
.mfp-iframe-holder { padding-top: 40px; padding-bottom: 40px; }
.mfp-iframe-holder .mfp-content { line-height: 0; width: 100%; max-width: 900px; }
.mfp-iframe-scaler { width: 100%; height: 0; overflow: hidden; padding-top: 56.25%; }
.mfp-iframe-scaler iframe { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: black; }
.mfp-iframe-holder .mfp-close { top: -40px; }
/* Main image in popup */
img.mfp-img { width: auto; max-width: 100%; height: auto; display: block; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 40px 0 40px; margin: 0 auto; }
/* The shadow behind the image */
.mfp-figure:after { content: ''; position: absolute; left: 0; top: 40px; bottom: 40px; display: block; right: 0; width: auto; height: auto; z-index: -1; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); background: #444444; }
.mfp-figure { line-height: 0; }
.mfp-bottom-bar { margin-top: -36px; position: absolute; top: 100%; left: 0; width: 100%; cursor: auto; }
.mfp-title { text-align: left; line-height: 18px; color: #f3f3f3; word-wrap: break-word; padding-right: 36px; }
.mfp-figure small { color: #bdbdbd; display: block; font-size: 12px; line-height: 14px; }
.mfp-image-holder .mfp-content { max-width: 100%; }
.mfp-gallery .mfp-image-holder .mfp-figure { cursor: pointer; }
@media screen and (max-width: 800px) and (orientation: landscape), screen and (max-height: 300px) { /** * Remove all paddings around the image on small screen */ .mfp-img-mobile .mfp-image-holder { padding-left: 0; padding-right: 0; } .mfp-img-mobile img.mfp-img { padding: 0; } /* The shadow behind the image */ .mfp-img-mobile .mfp-figure:after { top: 0; bottom: 0; } .mfp-img-mobile .mfp-bottom-bar { background: rgba(0, 0, 0, 0.6); bottom: 0; margin: 0; top: auto; padding: 3px 5px; position: fixed; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .mfp-img-mobile .mfp-bottom-bar:empty { padding: 0; } .mfp-img-mobile .mfp-counter { right: 5px; top: 3px; } .mfp-img-mobile .mfp-close { top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; background: rgba(0, 0, 0, 0.6); position: fixed; text-align: center; padding: 0; } .mfp-img-mobile .mfp-figure small { display: inline; margin-left: 5px; } }
@media all and (max-width: 900px) { .mfp-arrow { -webkit-transform: scale(0.75); transform: scale(0.75); } .mfp-arrow-left { -webkit-transform-origin: 0; transform-origin: 0; } .mfp-arrow-right { -webkit-transform-origin: 100%; transform-origin: 100%; } .mfp-container { padding-left: 6px; padding-right: 6px; } }
.mfp-ie7 .mfp-img { padding: 0; }
.mfp-ie7 .mfp-bottom-bar { width: 600px; left: 50%; margin-left: -300px; margin-top: 5px; padding-bottom: 5px; }
.mfp-ie7 .mfp-container { padding: 0; }
.mfp-ie7 .mfp-content { padding-top: 44px; }
.mfp-ie7 .mfp-close { top: 0; right: 0; padding-top: 0; }

A Pen by Theun - Script Codes JS Codes

/*! * * jQuery collagePlus Plugin v0.3.2 * https://github.com/ed-lea/jquery-collagePlus * * Copyright 2012, Ed Lea twitter.com/ed_lea * * built for http://qiip.me * * Dual licensed under the MIT or GPL Version 2 licenses. * http://www.opensource.org/licenses/mit-license.php * http://www.opensource.org/licenses/GPL-2.0 * */
;(function(e){e.fn.collagePlus=function(t){function i(t,n,r,i){var o=r.padding*(t.length-1)+t.length*t[0][3],u=r.albumWidth-o,a=u/(n-o),f=o,l=n<r.albumWidth?true:false;for(var c=0;c<t.length;c++){var h=e(t[c][0]),p=Math.floor(t[c][1]*a),d=Math.floor(t[c][2]*a),v=!!(c<t.length-1);if(r.allowPartialLastRow===true&&l===true){p=t[c][1];d=t[c][2]}f+=p;if(!v&&f<r.albumWidth){if(r.allowPartialLastRow===true&&l===true){p=p}else{p=p+(r.albumWidth-f)}}var m=h.is("img")?h:h.find("img");m.width(p);if(!h.is("img")){h.width(p+t[c][3])}m.height(d);if(!h.is("img")){h.height(d+t[c][4])}s(h,v,r);m.load(function(e){return function(){if(r.effect=="default"){e.animate({opacity:"1"},{duration:r.fadeSpeed})}else{if(r.direction=="vertical"){var t=i<=10?i:10}else{var t=c<=9?c+1:10}e.addClass(r.effect);e.addClass("effect-duration-"+t)}}}(h)).each(function(){if(this.complete)e(this).trigger("load")})}}function s(e,t,n){var r={"margin-bottom":n.padding+"px","margin-right":t?n.padding+"px":"0px",display:n.display,"vertical-align":"bottom",overflow:"hidden"};return e.css(r)}function o(t){$img=e(t);var n=new Array;n["w"]=parseFloat($img.css("border-left-width"))+parseFloat($img.css("border-right-width"));n["h"]=parseFloat($img.css("border-top-width"))+parseFloat($img.css("border-bottom-width"));return n}var n={targetHeight:400,albumWidth:this.width(),padding:parseFloat(this.css("padding-left")),images:this.children(),fadeSpeed:"fast",display:"inline-block",effect:"default",direction:"vertical",allowPartialLastRow:false};var r=e.extend({},n,t);return this.each(function(){var t=0,n=[],s=1;r.images.each(function(u){var a=e(this),f=a.is("img")?a:e(this).find("img");var l=typeof f.data("width")!="undefined"?f.data("width"):f.width(),c=typeof f.data("height")!="undefined"?f.data("height"):f.height();var h=o(f);f.data("width",l);f.data("height",c);var p=Math.ceil(l/c*r.targetHeight),d=Math.ceil(r.targetHeight);n.push([this,p,d,h["w"],h["h"]]);t+=p+h["w"]+r.padding;if(t>r.albumWidth&&n.length!=0){i(n,t-r.padding,r,s);delete t;delete n;t=0;n=[];s+=1}if(r.images.length-1==u&&n.length!=0){i(n,t,r,s);delete t;delete n;t=0;n=[];s+=1}})})}})(jQuery);
$('.Collage').collagePlus( { // change this to adjust the height of the rows 'targetHeight' : 150, // change this to try different effects // valid effets = effect-1 to effect-6 'effect' : "effect-3" }
);
$('.Collage').magnificPopup({
//	delegate: 'img',	type: 'image',	closeOnContentClick: false,	closeBtnInside: false,	mainClass: 'mfp-with-zoom mfp-img-mobile',	image: { src: item.el.attr('src'),	verticalFit: true,	titleSrc: function(item) {	return '&middot; <a class="image-source-link" href="'+item.el.attr('src')+'" target="_blank">'+item.el.attr('src')+'</a>';	}	},	gallery: {	enabled: true	},	zoom: {	enabled: true,	duration: 600, // don't forget to change the duration also in CSS	opener: function(element) {	return element.find('img');	}	}	});
A Pen by Theun - Script Codes
A Pen by Theun - Script Codes
Home Page Home
Developer Theun
Username tjoen
Uploaded July 23, 2022
Rating 4.5
Size 6,152 Kb
Views 40,480
Do you need developer help for A Pen by Theun?

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!

Theun (tjoen) Script Codes
Create amazing blog posts 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!