A Pen by DAVID NotDavid

Thumbnail
This awesome code was written by retyui, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright retyui ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>A Pen by  DAVID NotDavid</title>
  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">

  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="js-user-info c-user-info" hidden>
    <div class="c-user-info__inner">
        <h3 class="js-info-row c-user-info__row c-user-info__title">Passend für</h3>
        <p class="js-info-row c-user-info__row c-user-info__model">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Porro sint error quam at.</p>
        <p class="js-info-row c-user-info__row c-user-info__text">
            <span style="font-weight: 400;">Alle Scheibenwischer <b>passen garantiert</b> zu Ihrem Fahrzeug</span>
        </p>
    </div>
    <svg class="js-user-info-svg-bg c-user-info__bg" height="100%" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg"></svg>
</div>

<script src="//cdnjs.cloudflare.com/ajax/libs/snap.svg/0.5.1/snap.svg-min.js" onload="onLoadSnap()" async></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/retyui/a-pen-by-david-notdavid-OgLjQb */

.c-user-info, .c-user-info * {
    box-sizing: border-box
}

.c-user-info {
    position: fixed;
    right: calc(50vw);
    top: 10%;
    min-width: 250px;
    width: calc((100vw - 980px) / 2);
    z-index: 9999;
    max-width: 300px;
    text-align: left
}

.c-user-info__inner {
    padding: 5% 8% 5% 10%;
    display: flex;
    flex-direction: column
}

.c-user-info__title {
    color: #090154;
    font-size: 18px;
    font-weight: 700;
    line-height: 17px;
    margin: 0
}

.c-user-info__model, .c-user-info__text {
    color: #000;
    font-size: 14px;
    font-weight: 400
}

.c-user-info__model {
    font-weight: 700
}

.c-user-info__row {
    /*min-height: 55px;*/
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 0
}

.c-user-info__bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    -webkit-filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3));
    filter: drop-shadow(0 0 5px rgba(0, 0, 0, .3))
}




html,body{
	height:100%;
}
body{
	display:flex;
}

/*Downloaded from https://www.codeseek.co/retyui/a-pen-by-david-notdavid-OgLjQb */
 // init float block
(function onLoadSnap() {
        'use strict';

        function css3FilterFeatureDetect() {
            var a = document.createElement("div"), b = "filter: blur(2px)";
            a.style.cssText = "-webkit-" + b + ";" + b;
            var c = 0 != a.style.length, d = void 0 === document.documentMode || document.documentMode > 9;
            return c && d
        }


        jQuery(function ($) {
            function _Max($elmnts, method) {
                return Math.max.apply(Math, $elmnts.map(function (i, e) {
                    return $(e)[method]()
                }));
            }

            function toFixed(num, digits) {
                return Number((+num).toFixed(digits));
            }

            var wrap = $('.js-user-info').appendTo('body').removeAttr('hidden');

            var paper = new Snap(document.querySelector('.js-user-info-svg-bg'));

            var path = paper.path('M7.6 0H174c4 0 7.2 3.2 7.6 7.6l.4.8 8.8 45.6 9.2 46-9.2 46.4-9.2 46.4c-.4 4-3.6 7.2-7.6 7.2H7.6c-4 0-7.6-3.6-7.6-8V8c0-4.4 3.6-8 7.6-8z').attr({
                fill: '#fff'
            });

            if (!css3FilterFeatureDetect()) {
                path.attr({
                    filter: paper.filter(Snap.filter.shadow(0, 0, 3, '#000', .2))
                });
            }

            var offset = 10;
            var oldGradient;
            var rowsInfo = $('.js-info-row');
            $(window).off('resize.checkSize').on('resize.checkSize', function () {
                var notCenterRow = rowsInfo.not(':eq(1)').css({
                    minHeight: ''
                });

                var maxHeigth = _Max(notCenterRow, 'outerHeight') + 10;

                maxHeigth = maxHeigth < 60 ? 60 : maxHeigth;

                notCenterRow.css({
                    minHeight: maxHeigth
                });

                var w = wrap.outerWidth();
                var h = wrap.outerHeight();
                var hinner = wrap.height();

                var _offset = 2;
                var offset1 = toFixed(maxHeigth / hinner * 100) + _offset;
                var offset2 = toFixed(100 - maxHeigth / hinner * 100) - _offset;

                if (oldGradient) {
                    oldGradient.remove();
                }

                path.attr({
                    fill: (oldGradient = paper.gradient('l(0, 0, 0, 1)#fff:' + offset1 + '%-#e9e8f0:' + offset1 + '%-#e9e8f0:' + offset2 + '%-#fff:' + offset2 + '%')),
                    transform: 'translate(' + offset + ',' + offset + ') scale(' + (w - offset * 2) / 200 + ',' + (h - offset * 2) / 200 + ')'
                });
            }).trigger('resize.checkSize');
        });
    })();

Comments