{"id":3564,"date":"2021-06-07T13:56:26","date_gmt":"2021-06-07T13:56:26","guid":{"rendered":"https:\/\/rengga.dev\/blog\/?p=3564"},"modified":"2023-02-24T13:08:05","modified_gmt":"2023-02-24T13:08:05","slug":"js-tutorial-splash-page-hover-stuff","status":"publish","type":"post","link":"https:\/\/rengga.dev\/blog\/js-tutorial-splash-page-hover-stuff\/","title":{"rendered":"JS Tutorial &#8211; Splash Page Hover Stuff"},"content":{"rendered":"<p><span style=\"color: #ef3207;\"><a style=\"color: #ef3207;\" href=\"https:\/\/rengga.dev\/\" target=\"_blank\" rel=\"noopener\"><strong>Rengga Dev<\/strong><\/a> <\/span>&#8211; JS Tutorial &#8211; jQuery slider with hover effect and dark\/light themes.<br \/>\n<iframe style=\"width: 100%;\" title=\"JS Tutorial - Splash Page Hover Stuff\" src=\"https:\/\/codepen.io\/renggagumilar\/embed\/zYaOoBr?default-tab=result&amp;theme-id=dark\" height=\"800\" frameborder=\"no\" scrolling=\"no\" allowfullscreen=\"allowfullscreen\"><br \/>\nSee the Pen <a href=\"https:\/\/codepen.io\/renggagumilar\/pen\/zYaOoBr\"><br \/>\nJS Tutorial &#8211; Splash Page Hover Stuff<\/a> by Rengga Gumilar (<a href=\"https:\/\/codepen.io\/renggagumilar\">@renggagumilar<\/a>)<br \/>\non <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<br \/>\n<\/iframe><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"js\">var body_bg = 'linear-gradient(45deg, rgba(216,255,222,1) 10%, rgba(211,227,255,1) 90%)';\r\nvar button1_bg = 'linear-gradient(90deg, #3F2B96 0%, #A8C0FF 100%)';\r\nvar button2_bg = 'linear-gradient(-45deg, #1CB5E0 0%, #000851 100%)';\r\nvar button3_bg = 'linear-gradient(90deg, #9ebd13 0%, #008552 100%)';\r\nvar button4_bg = 'linear-gradient(-45deg, #d53369 0%, #daae51 100%)';\r\n\r\n$('a.button').on('mouseover', function() {\r\n    $('.logo').addClass('white');\r\n    $('.logo h3').css('color','white');\r\n    $('.intro h3').css('color','white');\r\n    if($(this).hasClass('button-1')) {\r\n        $('body').css('background', button1_bg);\r\n        $('.some-stuff').addClass('show');\r\n    } \r\n    if($(this).hasClass('button-2')) {\r\n        $('body').css('background', button2_bg);\r\n        $('.other-stuff').addClass('show');\r\n    }\r\n    if($(this).hasClass('button-3')) {\r\n        $('body').css('background', button3_bg);\r\n        $('.more-stuff').addClass('show');\r\n    }\r\n    if($(this).hasClass('button-4')) {\r\n        $('body').css('background', button4_bg);\r\n        $('.rare-stuff').addClass('show');\r\n    }\r\n});\r\n\r\n$('.button').on('mouseout', function() {\r\n    $('body').css('background',body_bg);\r\n    $('.logo').removeClass('white');\r\n    $('.logo h3').css('color','#444');\r\n    $('.intro h3').css('color','#444');\r\n    $('.some-stuff').removeClass('show');\r\n    $('.other-stuff').removeClass('show');\r\n    $('.more-stuff').removeClass('show');\r\n    $('.rare-stuff').removeClass('show');\r\n});<\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Rengga Dev &#8211; JS Tutorial &#8211; jQuery slider with hover effect and <a class=\"read-more\" href=\"https:\/\/rengga.dev\/blog\/js-tutorial-splash-page-hover-stuff\/\" title=\"JS Tutorial &#8211; Splash Page Hover Stuff\" itemprop=\"url\"><\/a><\/p>\n","protected":false},"author":1,"featured_media":3565,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20,12],"tags":[264,263,368,369,103,227],"newstopic":[],"class_list":{"0":"post-3564","1":"post","2":"type-post","3":"status-publish","4":"format-standard","5":"has-post-thumbnail","7":"category-javascript","8":"category-web-development","9":"tag-javascript-tutorial","10":"tag-js-tutorial","11":"tag-slider","12":"tag-splash-page-hover-stuff","13":"tag-web-design","14":"tag-web-designer"},"_links":{"self":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3564","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/comments?post=3564"}],"version-history":[{"count":1,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3564\/revisions"}],"predecessor-version":[{"id":3566,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/posts\/3564\/revisions\/3566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media\/3565"}],"wp:attachment":[{"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/media?parent=3564"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/categories?post=3564"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/tags?post=3564"},{"taxonomy":"newstopic","embeddable":true,"href":"https:\/\/rengga.dev\/blog\/wp-json\/wp\/v2\/newstopic?post=3564"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}