Vertical image scroller with hover arrows

Developer
SNÖGRAFX
Size
2,367 Kb
Views
26,312
  1. Vertical image scroller with hover arrows Previews
  2. Vertical image scroller with hover arrows HTML Codes
  3. Vertical image scroller with hover arrows CSS Codes
  4. Vertical image scroller with hover arrows JS Codes

How do I make an vertical image scroller with hover arrows?

*for Kattis. What is a vertical image scroller with hover arrows? How do you make a vertical image scroller with hover arrows? This script and codes were developed by SNÖGRAFX on 26 August 2022, Friday.

Vertical image scroller with hover arrows Previews
IQ Test

Vertical image scroller with hover arrows - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Vertical image scroller with hover arrows</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id='img_container'> <div id='scroll_up' class='scroll_zone'></div> <div id='img_content'> <img id='scrollimage' alt='Läs mer om Lagerbutikens torsdagserbjudanden här' src='http://media-edge-cache-cdn.gudrunsjodenfiles.com/ui/media/images/boutiques/page/stockholm_upplagsvagen/graphic/calender_scrollimage.jpg' /> </div> <div id='scroll_down' class='scroll_zone'></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Vertical image scroller with hover arrows - Script Codes CSS Codes

#img_container { top: 50px; left: 50px; height: 481px; width: 361px; position: relative;
}
#img_content { overflow: hidden; position: absolute; padding: 0px 0 0 0; height: 100%;
}
.scroll_zone { background: purple; width: 100%; text-align: center; height: 30px; position: absolute; z-index: 100;
}
.scroll_zone:hover { background: violet; cursor: pointer;
}
#scroll_up { top: 0px; background: transparent url('http://media-edge-cache-cdn.gudrunsjodenfiles.com/ui/media/images/boutiques/page/stockholm_upplagsvagen/graphic/uparrow2.png'); width: 361px; height: 30px;
}
#scroll_up:hover { background: transparent url('http://media-edge-cache-cdn.gudrunsjodenfiles.com/ui/media/images/boutiques/page/stockholm_upplagsvagen/graphic/uparrow_hov2.png') !important;
}
#scroll_down { bottom: 0px; background: transparent url('http://media-edge-cache-cdn.gudrunsjodenfiles.com/ui/media/images/boutiques/page/stockholm_upplagsvagen/graphic/downarrow2.png'); width: 361px; height: 30px;
}
#scroll_down:hover { background: transparent url('http://media-edge-cache-cdn.gudrunsjodenfiles.com/ui/media/images/boutiques/page/stockholm_upplagsvagen/graphic/downarrow_hov2.png') !important;
}

Vertical image scroller with hover arrows - Script Codes JS Codes

$(document).ready(function(){ var scrollContent = $('#img_content').scrollTop() + $('#img_content').height(); var scrollImg = $('#scrollimage').height(); scrollImg = ((scrollImg - scrollContent) - 30); $('#scroll_up').hide(); $('#img_content').scroll(function(){ if($('#img_content').scrollTop()>30){ $('#scroll_up').fadeIn(); }else{ $('#scroll_up').fadeOut(); } if($('#img_content').scrollTop()>scrollImg){ $('#scroll_down').fadeOut(); }else{ $('#scroll_down').fadeIn(); } }); $('#scroll_up').on('mouseenter', up_scroll); $('#scroll_down').on('mouseenter', down_scroll); $('#scroll_up, #scroll_down').on('mouseleave', function() { $('#img_content').stop(); }); function up_scroll(){ $('#img_content').animate({ scrollTop: '-=5' }, 10, up_scroll); } function down_scroll(){ $('#img_content').animate({ scrollTop: '+=5' }, 10, down_scroll); }
});
Vertical image scroller with hover arrows - Script Codes
Vertical image scroller with hover arrows - Script Codes
Home Page Home
Developer SNÖGRAFX
Username snografx
Uploaded August 26, 2022
Rating 3
Size 2,367 Kb
Views 26,312
Do you need developer help for Vertical image scroller with hover arrows?

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!

SNÖGRAFX (snografx) Script Codes
Name
Norkart CityPlanner ribbon logo
Huzzo spinner
Owl Carousel, Centred Content
Layer spin
Basic parallax
CityPlanner Logo Loading Animation 2017
CSS Navigation buttons
Hide on inactivity
CityPlanner SVG POI bubble
Google-style CSS options button
Create amazing Facebook ads with AI!

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!