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 - 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 |
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!
Name | Size |
Canvas Buldings | 2,737 Kb |
Touch Slider | 3,587 Kb |
Font Awesome Cheetsheet | 7,878 Kb |
D3 example | 2,392 Kb |
Love is in the air... | 2,642 Kb |
Responsive activity calendar | 3,850 Kb |
ROTATING IMAGE SLIDER WITH JQUERY | 5,062 Kb |
A Pen by Theun | 2,240 Kb |
City block generator | 2,897 Kb |
Catslicer | 2,957 Kb |
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!
Name | Username | Size |
Multi-step GSAP animation | Acacheung | 2,668 Kb |
Multiple jCarousel | Pafnuty | 2,461 Kb |
Brian The CSS Bee | Jonitrythall | 3,922 Kb |
NT Tribute | Skybutterfly | 2,850 Kb |
Css3 slide | Nakome | 3,190 Kb |
Social buttons | Flacu | 2,022 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Responsive Menu I | Rodericksandoval | 3,045 Kb |
Kut D3 | Jellevrswk | 3,687 Kb |
Angular Route | Arun_v606 | 1,837 Kb |
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!