Magnific Popup #3. CSS3-based animation effects

Documents

Title: Magnific Popup #3. CSS3-based animation effects

Description: Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Category: Lightbox

Library: Magnific Popup
jQuery

Include Files

<!-- Add jQuery and Magnific Popup -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>

Basic markup


        <script>
            $(function () {
                $('.effect').magnificPopup({
                    type: 'image',
                    // delay removal by X to allow out-animation
                    removalDelay: 500,
                    callbacks: {
                        beforeOpen: function () {
                            // just a hack that adds mfp-anim class to markup 
                            this.st.image.markup = this.st.image.markup.replace('mfp-figure',
                                'mfp-figure mfp-with-anim');
                            this.st.mainClass = this.st.el.attr('data-effect');
                        }
                    },
                    closeOnContentClick: true,
                    // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
                    midClick: true
                });
            });
        </script>   
        <a href="image.jpg" class="gallery" title="My caption">
	        <img src="thumbnail.jpg" alt="" />
        </a>

Related: Magnific Popup #2. media lightbox
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.; Magnific Popup #1. basic image lightbox
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.; CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine; fancyBox #1. basic image lightbox
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.; fancyBox #2. media lightbox
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.

Source Code

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- Add jQuery and Magnific Popup -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
    <title>Magnific Popup #3. CSS3-based animation effects</title>
    <style>
        a {
            text-decoration: none;
        }
        /* Zoom effect */
        .mfp-zoom-in .mfp-with-anim {
            opacity: 0;
            transition: all 0.2s ease-in-out;
            transform: scale(0.8);
        }
        .mfp-zoom-in.mfp-bg {
            opacity: 0;
            transition: all 0.3s ease-out;
        }
        .mfp-zoom-in.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-in.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-zoom-in.mfp-removing .mfp-with-anim {
            transform: scale(0.8);
            opacity: 0;
        }
        .mfp-zoom-in.mfp-removing.mfp-bg {
            opacity: 0;
        }
        /* Newspaper effect */
        .mfp-newspaper .mfp-with-anim {
            opacity: 0;
            -webkit-transition: all 0.2s ease-in-out;
            transition: all 0.5s;
            transform: scale(0) rotate(500deg);
        }
        .mfp-newspaper.mfp-bg {
            opacity: 0;
            transition: all 0.5s;
        }
        .mfp-newspaper.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: scale(1) rotate(0deg);
        }
        .mfp-newspaper.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-newspaper.mfp-removing .mfp-with-anim {
            transform: scale(0) rotate(500deg);
            opacity: 0;
        }
        .mfp-newspaper.mfp-removing.mfp-bg {
            opacity: 0;
        }
        /* Move-horizontal effect */
        .mfp-move-horizontal .mfp-with-anim {
            opacity: 0;
            transition: all 0.3s;
            transform: translateX(-50px);
        }
        .mfp-move-horizontal.mfp-bg {
            opacity: 0;
            transition: all 0.3s;
        }
        .mfp-move-horizontal.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: translateX(0);
        }
        .mfp-move-horizontal.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-move-horizontal.mfp-removing .mfp-with-anim {
            transform: translateX(50px);
            opacity: 0;
        }
        .mfp-move-horizontal.mfp-removing.mfp-bg {
            opacity: 0;
        }
        /* Move-from-top effect */
        .mfp-move-from-top .mfp-content {
            vertical-align: top;
        }
        .mfp-move-from-top .mfp-with-anim {
            opacity: 0;
            transition: all 0.2s;
            transform: translateY(-100px);
        }
        .mfp-move-from-top.mfp-bg {
            opacity: 0;
            transition: all 0.2s;
        }
        .mfp-move-from-top.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: translateY(0);
        }
        .mfp-move-from-top.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-move-from-top.mfp-removing .mfp-with-anim {
            transform: translateY(-50px);
            opacity: 0;
        }
        .mfp-move-from-top.mfp-removing.mfp-bg {
            opacity: 0;
        }
        /* 3d unfold */
        .mfp-3d-unfold .mfp-content {
            perspective: 2000px;
        }
        .mfp-3d-unfold .mfp-with-anim {
            opacity: 0;
            transition: all 0.3s ease-in-out;
            transform-style: preserve-3d;
            transform: rotateY(-60deg);
        }
        .mfp-3d-unfold.mfp-bg {
            opacity: 0;
            transition: all 0.5s;
        }
        .mfp-3d-unfold.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: rotateY(0deg);
        }
        .mfp-3d-unfold.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-3d-unfold.mfp-removing .mfp-with-anim {
            transform: rotateY(60deg);
            opacity: 0;
        }
        .mfp-3d-unfold.mfp-removing.mfp-bg {
            opacity: 0;
        }
        /* Zoom-out effect */
        .mfp-zoom-out .mfp-with-anim {
            opacity: 0;
            transition: all 0.3s ease-in-out;
            transform: scale(1.3);
        }
        .mfp-zoom-out.mfp-bg {
            opacity: 0;
            transition: all 0.3s ease-out;
        }
        .mfp-zoom-out.mfp-ready .mfp-with-anim {
            opacity: 1;
            transform: scale(1);
        }
        .mfp-zoom-out.mfp-ready.mfp-bg {
            opacity: 0.8;
        }
        .mfp-zoom-out.mfp-removing .mfp-with-anim {
            transform: scale(1.3);
            opacity: 0;
        }
        .mfp-zoom-out.mfp-removing.mfp-bg {
            opacity: 0;
        }
    </style>
</head>
<body>
    <header>
        <h1 class="dlw-title">Magnific Popup
            <small>#3. CSS3-based animation effects</small>
        </h1>
        <p class="dlw-description">Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
            <br> Here we summarize the CSS3-based animation settings.</p>
    </header>
    <section>
        <h2 class="dlw-subtitle">[1] Zoom effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-zoom-in" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <section>
        <h2 class="dlw-subtitle">[2] Newspaper effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-newspaper" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <section>
        <h2 class="dlw-subtitle">[3] Move-horizontal effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-move-horizontal" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <section>
        <h2 class="dlw-subtitle">[4] Move-from-top effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-move-from-top" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <section>
        <h2 class="dlw-subtitle">[5] 3d unfold effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-3d-unfold" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <section>
        <h2 class="dlw-subtitle">[6] Zoom-out effect</h2>
        <a href="images/photo01-l.jpg" class="effect" data-effect="mfp-zoom-out" title="Look at the keyboard placed on the desk from the side.">
            <img src="images/photo01-s.jpg" />
        </a>
    </section>
    <script>
        $(function () {
            $('.effect').magnificPopup({
                type: 'image',
                //delay removal by X to allow out-animation
                removalDelay: 500,
                callbacks: {
                    beforeOpen: function () {
                        // just a hack that adds mfp-anim class to markup 
                        this.st.image.markup = this.st.image.markup.replace('mfp-figure',
                            'mfp-figure mfp-with-anim');
                        this.st.mainClass = this.st.el.attr('data-effect');
                    }
                },
                closeOnContentClick: true,
                // allow opening popup on middle mouse click. Always set it to true if you don't provide alternative source.
                midClick: true
            });
        });
    </script>
</body>
</html>

Comment

Search

Style Design: Text Style DesignCSS
Here, design samples of various effects to text are posted.; Headline (Heading) Style DesignCSS
The headline is the text indicating the nature of the article below it.
Here, design samples of headline using style sheets are posted.; OL (Ordered List) Style DesignCSS
The HTML <ol> element represents an ordered list of items.
Here, design samples of ol using style sheets are posted.; HR (Separator Line) Style DesignCSS
The HTML <hr> element represents a thematic break between paragraph-level elements.
Here, design samples of hr using style sheets are posted.; Box Shadow Style DesignCSS
The box-shadow CSS property is used to add shadow effects around an element's frame.
Here, design samples of box-shadow property using style sheets are posted.

Layout: How to specify a breakpoint and switch imagesJS
Using <picture> and srcset, it is a method of switching images according to screen size. It also corresponds to retina.
In this example, Picturefill is added for IE.; Grid LayoutCSS
Grid is the value of the CSS display property.
Here, layout samples of grid property are posted.; FlexCSS
Flex is the value of the CSS display property.

Link & Button: Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Button.cssCSS
Button.css is collection of CSS3 button animations.

Card: Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.

Text: Arctext.jsjQuery
Arctext.js is a jQuery plugin that causes a string to curve along a specified circle radius.; Lettering.jsjQuery
Lettering.js is a jQuery plugin that encloses a specified character string with one character, one word, one column by <span> tag.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; FitText.jsjQuery
FitText.js is jQuery plugin that fits the font size according to the width of the parent element.

Media: FeedEkjQuery
FeedEk is a jQuery plugin that parses RSS and Atom feeds and displays them.; YouTube Embed
Introduction of various embedment methods of YouTube.; FitVids.jsjQuery
FitVids is a jQuery plug-in that converts YouTube videos embedded with iframe into responsive.; xZoomjQuery
xZoom is a jQuery plug-in that shows a zoom preview of the image.
It is possible to customize the preview position and zoom.; Instagram.cssCSS
Instagram.css is a stylesheet set that filters photos like instagram.

Date: Moment.jsJS
Moment.js is a javascript that processes and displays date and time.; Bootstrap Material DatePickerjQuery
Bootstrap Material DatePicker is jQuery data picker plugin using Moment.js.

Table: MultifilterjQuery
Multifilter is jQuery Table Filtering Plugin.; Flex TableCSS
Responsive table using "display: flex;".
Not supported for rowspan.; Grid TableCSS
Responsive table using "display: grid;".
Not supported for rowspan.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Form: jQuery Mask PluginjQuery
jQuery Mask Plugin is jQuery plugin that make mask (validation) on form field.; Select2 #1. Basic SettingjQuery
Select2 is a jquery plugin that makes select form more advanced.
Here is the basic usage of Select2.; jQuery SearcherjQuery
jQuery Searcher is jQuery search/filtering plugin that supports various markups.

Slider: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; FlexSlider #1. Single SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic single slider setting of Flexslider are posted.; FlexSlider #2. Carousel SliderjQuery
FlexSlider is responsive jQuery slider plugin.
Here, basic carousel slider setting of Flexslider are posted.; slick #1. Single SliderjQuery
slick is responsive jQuery slider plugin.
Here, basic single slider setting of slick are posted.; slick #2. Carousel SliderjQuery
slick is responsive jQuery slider plugin.
Here, carousel slider setting of slick are posted.

Lightbox: fancyBox #1. basic image lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, basic image lightbox setting of fancyBox are posted.; fancyBox #2. media lightboxjQuery
fancyBox is jQuery lightbox plugin.
Here, YouTube, Vimeo, Instagram, Google Maps, inline HTML, iframe lightbox setting of fancyBox are posted.; Magnific Popup #1. basic image lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, basic image lightbox setting of Magnific Popup are posted.; Magnific Popup #2. media lightboxjQuery
Magnific Popup is jQuery lightbox plugin.
Here, YouTube, Vimeo, Google Maps, inline HTML lightbox setting of Magnific Popup are posted.; Magnific Popup #3. CSS3-based animation effectsjQuery
Since Magnific Popup does not incorporate animation effects by standard, you need to set it yourself.
Here we summarize the CSS3-based animation settings.

Navigation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; GreedyNavjQuery
GreedyNav is a responsive navigation menu using jQuery which switches over the items that protruded when the screen was scaled down to dropdown.; GridTabjQuery
GridTab is a lightweight jQuery plugin to create grid based responsive tabs.; jQuery.NiceScrolljQuery
jQuery.NiceScroll is a jQuery plugin that extends scroll display and functions.; metisMenujQuery
metisMenu is a jQuery plugin that expands vertical and vertical menus.; fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; Offside.js #1. Basic Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample where the left side off-canvas expands.; Offside.js #2. Multiple Off-canvasJS
Offside.js is a JavaScript kit that expands off-canvas.
This is a sample that expands multiple off-canvases.; Filterizr #1. Basic FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a basic sample without setting options.; Filterizr #2. Advanced FilteringjQuery
Filterizr is a jQuery plugin that sorts, shuffles, searches for the items in the container.
This is a sample of more advanced setting of Filterizr.

Animation: animsitionjQuery
animsition is a jQuery plugin that adds an in/out animation effect at the time of page transition.; Textillate.jsjQuery
Textillate.js is a jQuery plugin that adds In / Out animation effects to text.; ScrollajQuery
Scrolla is jQuery scroll animation plugin.; Hover.cssCSS
Hover.css is a style-sheet collection of hover effects.; Animate.cssCSS
Animate.css is a style-sheet collection of animation effects.; jQuery Easing PluginjQuery
jQuery Easing Plugin is a plugin to extend the easing (animation effect) of jQuery.
The easing of element is posted.

Background: fullPage.js #1. basic fullscreen scrollingjQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, basic fullscreen scrolling of fullPage.js are posted.; fullPage.js #2. fullscreen scrolling with menujQuery
fullPage.js is jQuery Fullscreen Scrolling plugin.
Here, navigation menu is displayed..; jquery.mb.YTPlayerjQuery
jQuery.mb.YTPlayer is jQuery Background player plugin.

Modal / Tooltip: Hint.cssCSS
Hint.css is a style sheet set for tooltip.
You can display tooltip just by adding class name.; ProtipjQuery
Protip is a jQuery plugin that generates tooltips.
Set the position, size, etc. of the tooltip only with data attribute.

Social

Framework: Bootstrap CarouseljQuery
It is a standard Carousel of Bootstrap Framework.; Bootstrap CardCSS
It is a standard Card design of Bootstrap Framework.; Bootstrap ButtonCSS
It is a standard button design of Bootstrap Framework.; Bootstrap TableCSS
It is a standard Table design of Bootstrap Framework.

Cheat Sheet: HTML5 Cheat Sheet
HTML5 Cheat Sheet by Make A Website Hub; CSS3 Cheat Sheet
CSS3 Cheat Sheet by Smashing Magazine; Visual Studio Code Keyboard Shortcuts
This is the Visual Studio Code default keyboard shortcut list.; GreenSock Cheat Sheet
Cheese sheet of TweenMAX, TweenLite, TimelineLite, TimelineMax by GreenSock.

Other: Google Search
On this page you can search for codes collectively.; Design News
It is a news feed about design.