A Pen by Theun
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 '· <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'); } } });
| 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
| Name | Size |
| Love is in the air... | 2,642 Kb |
| D3 example | 2,392 Kb |
| ROTATING IMAGE SLIDER WITH JQUERY | 5,062 Kb |
| A Pen by Theun | 6,152 Kb |
| Touch Slider | 3,587 Kb |
| Font Awesome Cheetsheet | 7,878 Kb |
| Catslicer | 2,957 Kb |
| Canvas Buldings | 2,737 Kb |
| Generative art from rectangleworld | 5,196 Kb |
| Roulette | 2,417 Kb |
Create amazing love letters 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!
Similar Scripts & Codes
| Name | Username | Size |
| A Pen by Sooba | Sooba | 2,516 Kb |
| Cartoon Bomb | Tcmulder | 4,929 Kb |
| A Pen by Moeid Saleem | Moeidsaleem | 1,862 Kb |
| Javascript Welcome | Peterlewicki | 1,573 Kb |
| Wikipedia Viewer | Odylic | 2,333 Kb |
| Mega Menu by Joni | Asakasinsky | 3,171 Kb |
| Nested table email layout | Massimo-cassandro | 2,355 Kb |
| JavaScript constructors | Simboonlong | 2,415 Kb |
| Nice responsive team page | Infomiho | 3,139 Kb |
| Gears | Synvox | 3,278 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!