A Pen by Ivan Grozdic on CodePen.
Created
December 26, 2022 15:05
-
-
Save SALMANKHANPM/60c81df140b7498a14c88b8e26ce2253 to your computer and use it in GitHub Desktop.
Blog page concept with cursor image on hover
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="section padding-top-big padding-bottom over-hide"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12 section-title-wrap text-center parallax-fade-top"> | |
| <p class="primary-color">stories</p> | |
| <h1>a place full<br>of stuff</h1> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section padding-bottom-big over-hide"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12 text-center mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-1"> | |
| <div class="blog-post-box"> | |
| <h5>We want to share with you our mood after selection.</h5> | |
| <p class="mb-0 mt-3">october 27, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5 mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-2"> | |
| <div class="blog-post-box"> | |
| <h5>Sleep, code, eat, travel. Repeat.</h5> | |
| <p class="mb-0 mt-3">october 24, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5 mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-3"> | |
| <div class="blog-post-box"> | |
| <h5>Don’t get lost quoting your next projects.</h5> | |
| <p class="mb-0 mt-3">october 22, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5 mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-4"> | |
| <div class="blog-post-box"> | |
| <h5>Don´t give up, keep on focus.</h5> | |
| <p class="mb-0 mt-3">october 19, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5 mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-5"> | |
| <div class="blog-post-box"> | |
| <h5>Moments from a life. Day of photography.</h5> | |
| <p class="mb-0 mt-3">october 15, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5 mb-3" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-6"> | |
| <div class="blog-post-box"> | |
| <h5>How you look at it is pretty much how you'll see it.</h5> | |
| <p class="mb-0 mt-3">october 12, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| <div class="col-12 text-center mt-5" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="cursor-link-blog-post-7"> | |
| <div class="blog-post-box"> | |
| <h5>Don´t give up, keep on focus.</h5> | |
| <p class="mb-0 mt-3">october 09, 2018</p> | |
| </div> | |
| </a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="section padding-top-bottom over-hide background-dark"> | |
| <div class="container"> | |
| <div class="row"> | |
| <div class="col-12 text-center" data-scroll-reveal="enter bottom move 30px over 0.5s after 0.2s"> | |
| <a href="#" class="blog-nav cursor-link">older news</a> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Page cursor | |
| ================================================== --> | |
| <div class="cursor cursor-shadow"></div> | |
| <div class="cursor cursor-dot"></div> | |
| <!-- Link to page | |
| ================================================== --> | |
| <a href="https://themeforest.net/user/ig_design/portfolio" class="link-to-portfolio cursor-link" target=”_blank” ></a> | |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //Page cursors | |
| $(window).mousemove(function(e) { | |
| $(".cursor").css({ | |
| left: e.pageX, | |
| top: e.pageY | |
| }) | |
| }) | |
| $(".cursor-link") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active") | |
| }) | |
| //Blog page cursors with image | |
| //Blog post 1: | |
| $(".cursor-link-blog-post-1") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-1") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-1") | |
| }) | |
| //Blog post 2: | |
| $(".cursor-link-blog-post-2") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-2") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-2") | |
| }) | |
| //Blog post 3: | |
| $(".cursor-link-blog-post-3") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-3") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-3") | |
| }) | |
| //Blog post 4: | |
| $(".cursor-link-blog-post-4") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-4") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-4") | |
| }) | |
| //Blog post 5: | |
| $(".cursor-link-blog-post-5") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-5") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-5") | |
| }) | |
| //Blog post 6: | |
| $(".cursor-link-blog-post-6") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-6") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-6") | |
| }) | |
| //Blog post 7: | |
| $(".cursor-link-blog-post-7") | |
| .on("mouseenter", function() { | |
| $('.cursor').addClass("active-blog-post-7") | |
| }) | |
| .on("mouseleave", function() { | |
| $('.cursor').removeClass("active-blog-post-7") | |
| }) | |
| //Parallax & fade on scroll | |
| function scrollBanner() { | |
| $(document).on('scroll', function(){ | |
| var scrollPos = $(this).scrollTop(); | |
| $('.parallax-fade-top').css({ | |
| 'top' : (scrollPos/2)+'px', | |
| 'opacity' : 1-(scrollPos/240) | |
| }); | |
| }); | |
| } | |
| scrollBanner(); | |
| /*! Scroll Reveal Animations */ | |
| window.scrollReveal=function(t){"use strict";function e(e){this.docElem=t.document.documentElement,this.options=this.extend(this.defaults,e),this.styleBank={},1==this.options.init&&this.init()}var i=1,o=function(){return t.requestAnimationFrame||t.webkitRequestAnimationFrame||t.mozRequestAnimationFrame||function(e){t.setTimeout(e,1e3/60)}}();return e.prototype={defaults:{after:"0s",enter:"bottom",move:"24px",over:"0.66s",easing:"ease-in-out",opacity:0,viewportFactor:.33,reset:!1,init:!0},init:function(){this.scrolled=!1;var e=this;this.elems=Array.prototype.slice.call(this.docElem.querySelectorAll("[data-scroll-reveal]")),this.elems.forEach(function(t,o){var r=t.getAttribute("data-scroll-reveal-id");r||(r=i++,t.setAttribute("data-scroll-reveal-id",r)),e.styleBank[r]||(e.styleBank[r]=t.getAttribute("style")),e.update(t)});var r=function(t){e.scrolled||(e.scrolled=!0,o(function(){e._scrollPage()}))},n=function(){function t(){e._scrollPage(),e.resizeTimeout=null}e.resizeTimeout&&clearTimeout(e.resizeTimeout),e.resizeTimeout=setTimeout(t,200)};t.addEventListener("scroll",r,!1),t.addEventListener("resize",n,!1)},_scrollPage:function(){var t=this;this.elems.forEach(function(e,i){t.update(e)}),this.scrolled=!1},parseLanguage:function(t){function e(t){var e=[],i=["from","the","and","then","but","with"];return t.forEach(function(t,o){i.indexOf(t)>-1||e.push(t)}),e}var i=t.getAttribute("data-scroll-reveal").split(/[, ]+/),o={};return i=e(i),i.forEach(function(t,e){switch(t){case"enter":return void(o.enter=i[e+1]);case"after":return void(o.after=i[e+1]);case"wait":return void(o.after=i[e+1]);case"move":return void(o.move=i[e+1]);case"ease":return o.move=i[e+1],void(o.ease="ease");case"ease-in":return o.move=i[e+1],void(o.easing="ease-in");case"ease-in-out":return o.move=i[e+1],void(o.easing="ease-in-out");case"ease-out":return o.move=i[e+1],void(o.easing="ease-out");case"over":return void(o.over=i[e+1]);default:return}}),o},update:function(t){var e=this.genCSS(t),i=this.styleBank[t.getAttribute("data-scroll-reveal-id")];return null!=i?i+=";":i="",t.getAttribute("data-scroll-reveal-initialized")||(t.setAttribute("style",i+e.initial),t.setAttribute("data-scroll-reveal-initialized",!0)),this.isElementInViewport(t,this.options.viewportFactor)?t.getAttribute("data-scroll-reveal-complete")?void 0:this.isElementInViewport(t,this.options.viewportFactor)?(t.setAttribute("style",i+e.target+e.transition),void(this.options.reset||setTimeout(function(){""!=i?t.setAttribute("style",i):t.removeAttribute("style"),t.setAttribute("data-scroll-reveal-complete",!0)},e.totalDuration))):void 0:void(this.options.reset&&t.setAttribute("style",i+e.initial+e.reset))},genCSS:function(t){var e,i,o=this.parseLanguage(t);o.enter?(("top"==o.enter||"bottom"==o.enter)&&(e=o.enter,i="y"),("left"==o.enter||"right"==o.enter)&&(e=o.enter,i="x")):(("top"==this.options.enter||"bottom"==this.options.enter)&&(e=this.options.enter,i="y"),("left"==this.options.enter||"right"==this.options.enter)&&(e=this.options.enter,i="x")),("top"==e||"left"==e)&&(o.move?o.move="-"+o.move:o.move="-"+this.options.move);var r=o.move||this.options.move,n=o.over||this.options.over,s=o.after||this.options.after,a=o.easing||this.options.easing,l=o.opacity||this.options.opacity,u="-webkit-transition: -webkit-transform "+n+" "+a+" "+s+", opacity "+n+" "+a+" "+s+";transition: transform "+n+" "+a+" "+s+", opacity "+n+" "+a+" "+s+";-webkit-perspective: 1000;-webkit-backface-visibility: hidden;",c="-webkit-transition: -webkit-transform "+n+" "+a+" 0s, opacity "+n+" "+a+" "+s+";transition: transform "+n+" "+a+" 0s, opacity "+n+" "+a+" "+s+";-webkit-perspective: 1000;-webkit-backface-visibility: hidden;",f="-webkit-transform: translate"+i+"("+r+");transform: translate"+i+"("+r+");opacity: "+l+";",p="-webkit-transform: translate"+i+"(0);transform: translate"+i+"(0);opacity: 1;";return{transition:u,initial:f,target:p,reset:c,totalDuration:1e3*(parseFloat(n)+parseFloat(s))}},getViewportH:function(){var e=this.docElem.clientHeight,i=t.innerHeight;return i>e?i:e},getOffset:function(t){var e=0,i=0;do isNaN(t.offsetTop)||(e+=t.offsetTop),isNaN(t.offsetLeft)||(i+=t.offsetLeft);while(t=t.offsetParent);return{top:e,left:i}},isElementInViewport:function(e,i){var o=t.pageYOffset,r=o+this.getViewportH(),n=e.offsetHeight,s=this.getOffset(e).top,a=s+n,i=i||0;return r>=s+n*i&&a>=o||"fixed"==(e.currentStyle?e.currentStyle:t.getComputedStyle(e,null)).position},extend:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t[i]=e[i]);return t}},e}(window); | |
| /* Scroll Animation */ | |
| window.scrollReveal = new scrollReveal(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="https://code.jquery.com/jquery-2.2.2.min.js"></script> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> | |
| <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import url('https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,500i,700,700i,900,900i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese'); | |
| @import url('https://fonts.googleapis.com/css?family=Poppins:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&subset=devanagari,latin-ext'); | |
| body{ | |
| font-family: 'Roboto', sans-serif; | |
| font-weight: 300; | |
| font-size: 15px; | |
| line-height: 1.7; | |
| color: #c4c3ca; | |
| overflow-x: hidden; | |
| background-color: #14151a; | |
| } | |
| h1, h2, h3, h4, h5, h6, | |
| .h1, .h2, .h3, .h4, .h5, .h6{ | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 300; | |
| margin-bottom: 0; | |
| line-height: 1.35; | |
| color: #fff; | |
| } | |
| h5, .h5 { | |
| font-size: 1.8rem; | |
| font-weight: 500; | |
| } | |
| ::selection { | |
| color: #fff; | |
| } | |
| ::-moz-selection { | |
| color: #fff; | |
| } | |
| ::selection { | |
| background-color: #000; | |
| } | |
| ::-moz-selection { | |
| background-color: #000; | |
| } | |
| .section { | |
| position: relative; | |
| width: 100%; | |
| display: block; | |
| } | |
| .over-hide{ | |
| overflow: hidden; | |
| } | |
| .primary-color{ | |
| color: #7f6ed2; | |
| } | |
| .padding-top-bottom-big { | |
| padding-top: 140px; | |
| padding-bottom: 140px; | |
| } | |
| .padding-top-big { | |
| padding-top: 140px; | |
| } | |
| .padding-bottom-big { | |
| padding-bottom: 140px; | |
| } | |
| .padding-top-bottom { | |
| padding-top: 100px; | |
| padding-bottom: 100px; | |
| } | |
| .padding-top { | |
| padding-top: 100px; | |
| } | |
| .padding-bottom { | |
| padding-bottom: 100px; | |
| } | |
| .section-title-wrap p{ | |
| letter-spacing: 2px; | |
| font-size: 22px; | |
| font-weight: 500; | |
| padding: 0; | |
| } | |
| .section-title-wrap h1{ | |
| margin: 0; | |
| padding: 0; | |
| font-size: 6rem; | |
| font-weight: 300; | |
| line-height: 1.1; | |
| } | |
| .background-dark { | |
| background-color: #111; | |
| } | |
| /* #Cursor | |
| ================================================== */ | |
| * { | |
| cursor: none; | |
| } | |
| .cursor { | |
| --size: 8px; | |
| height: var(--size); | |
| width: var(--size); | |
| border-radius: 50%; | |
| position: absolute; | |
| z-index: 10000; | |
| transform: translate(-50%, -50%); | |
| pointer-events: none; | |
| } | |
| .cursor.cursor-shadow { | |
| background-color: transparent; | |
| border: 1px solid #fff; | |
| --size: 40px; | |
| transition: top .2s, left .2s, | |
| width .2s, height .2s, | |
| background-color .2s, border-color 0.2s; | |
| transition-timing-function: ease-out; | |
| } | |
| .cursor.cursor-dot { | |
| background: #7f6ed2; | |
| transition: width .2s, height .2s; | |
| } | |
| .cursor-shadow.active { | |
| --size: 80px; | |
| border-color: rgba(255,255,255, 0); | |
| background-color: rgba(255,255,255,.1); | |
| } | |
| .cursor-dot.active { | |
| --size: 0; | |
| } | |
| a { | |
| cursor: pointer; | |
| } | |
| a:hover { | |
| text-decoration: none; | |
| } | |
| /* #Blog post | |
| ================================================== */ | |
| .blog-post-box{ | |
| position: relative; | |
| display: inline-block; | |
| cursor: pointer; | |
| } | |
| .blog-post-box h5{ | |
| position: relative; | |
| text-transform: none; | |
| cursor: pointer; | |
| mix-blend-mode: difference; | |
| z-index: 3; | |
| -webkit-transition: all 200ms linear; | |
| transition: all 200ms linear; | |
| } | |
| .blog-post-box:hover h5{ | |
| } | |
| .blog-post-box p{ | |
| position: relative; | |
| color: #c4c3ca; | |
| cursor: pointer; | |
| font-weight: 500; | |
| font-size: 14px; | |
| display: inline-block; | |
| mix-blend-mode: luminosity; | |
| padding: 4px 12px; | |
| background-color: rgba(127,110,210,.8); | |
| border-radius: 2px; | |
| z-index: 4; | |
| } | |
| /* #Blog cursor images | |
| ================================================== */ | |
| .cursor.cursor-dot.active-blog-post-1, | |
| .cursor.cursor-dot.active-blog-post-2, | |
| .cursor.cursor-dot.active-blog-post-3, | |
| .cursor.cursor-dot.active-blog-post-4, | |
| .cursor.cursor-dot.active-blog-post-5, | |
| .cursor.cursor-dot.active-blog-post-6, | |
| .cursor.cursor-dot.active-blog-post-7 { | |
| opacity: 0; | |
| } | |
| .cursor-shadow.active-blog-post-1, | |
| .cursor-shadow.active-blog-post-2, | |
| .cursor-shadow.active-blog-post-3, | |
| .cursor-shadow.active-blog-post-4, | |
| .cursor-shadow.active-blog-post-5, | |
| .cursor-shadow.active-blog-post-6, | |
| .cursor-shadow.active-blog-post-7 { | |
| --size: 160px; | |
| border-color: rgba(255,255,255, 0); | |
| border-width: 0; | |
| background-color: transparent; | |
| background-position: center center; | |
| background-repeat: no-repeat; | |
| background-size: cover; | |
| border-radius: 50%; | |
| z-index: 1; | |
| } | |
| .cursor-shadow.active-blog-post-1 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/1.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-2 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/2.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-3 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/3.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-4 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/4.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-5 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/5.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-6 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/6.jpg'); | |
| } | |
| .cursor-shadow.active-blog-post-7 { | |
| background-image: url('http://ivang-design.com/alke/img/blog/7.jpg'); | |
| } | |
| /* #Blog nav link | |
| ================================================== */ | |
| .blog-nav { | |
| position: relative; | |
| cursor: pointer; | |
| text-align: center; | |
| font-family: 'Poppins', sans-serif; | |
| font-weight: 900; | |
| color: #565b70; | |
| font-size: 4vw; | |
| opacity: 0.4; | |
| transition: opacity .2s; | |
| transition-timing-function: ease-out; | |
| } | |
| .blog-nav:hover { | |
| opacity: 0.7; | |
| color: #565b70; | |
| } | |
| /* #Link to page | |
| ================================================== */ | |
| .link-to-portfolio { | |
| position: fixed; | |
| top: 30px; | |
| right: 30px; | |
| z-index: 20; | |
| cursor: pointer; | |
| width: 40px; | |
| height: 40px; | |
| text-align: center; | |
| border-radius: 3px; | |
| background-position: center center; | |
| background-size: cover; | |
| background-image: url('https://ivang-design.com/ig-logo.jpg'); | |
| box-shadow: 0 0 0 2px rgba(255,255,255,.1); | |
| transition: opacity .2s, border-radius .2s, box-shadow .2s; | |
| transition-timing-function: ease-out; | |
| } | |
| .link-to-portfolio:hover { | |
| opacity: 0.8; | |
| border-radius: 50%; | |
| box-shadow: 0 0 0 20px rgba(255,255,255,.1); | |
| } | |
| @media (max-width: 991px) { | |
| h5, .h5 { | |
| font-size: 1.2rem; | |
| } | |
| .section-title-wrap h1{ | |
| font-size: 4rem; | |
| } | |
| .blog-nav { | |
| font-size: 7vw; | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" /> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment