A dynamic website that fills the entire screen, featuring a subtle scroll effect that is activated with a

After building a fullscreen website using Bootstrap and the jumbotron feature, I added a 10px border with body padding for extra styling.

Here is the HTML structure:

<div class="row">
  <div class="jumbotron indx-BG" >
     ...
  </div>
</div>

And here is the CSS styling:

body { padding: 10px; }

.indx-BG {
 background: url('...') no-repeat center center;
 background-size: cover;
 min-height: calc(100vh - 20px);
 width: 100%;
}

Everything works as intended so far. Now, I'd like to add a responsive footer of unknown height that remains hidden until the user scrolls down. The goal is to keep the site fullscreen unless scrolling triggers the display of the additional footer content.

UPDATE: I also want to incorporate a smooth animation effect when scrolling, similar to the sliders that seamlessly shift content up or down on the screen.

javascripthtmlcsstwitter-bootstrap

Answer №1

Hopefully, this information proves to be helpful. I've included two additional sections for you to observe the animation in action. The code is designed to detect scroll direction - whether it's from bottom to top or vice versa. If the scroll is upwards, it will reset the scroll animation; on the other hand, if the scroll is downwards, it will animate the scroll towards the footer.

var domouse = true;
var content_down = $('footer').offset().top;
var content_up = $('div').offset().top;
$('body').on('mousewheel DOMMouseScroll', function(e) {

  if (e.originalEvent.wheelDelta > 0) {
    if (!domouse)
    return;
    domouse = false;
    $('html, body').animate({
      scrollTop: content_up
    }, 1000, function(){
      domouse = true;
    });
  } else {
    if (!domouse)
    return;
    domouse = false;
    $('html, body').animate({
      scrollTop: content_down
    }, 1000, function(){
      domouse = true;
    });
  }

});
div {
  width: 100%;
  height: 100vh;
  text-align: center;
  color: white;
  font-size: 32px;
  line-height: 100vh;
  background-color: black;
  background-size: cover;
}
footer {
  padding: 15px 0 15px 0;
  text-align: center;
  color: black;
  font-size: 20px;
}
body {
  overflow: hidden;
  margin: 0;

}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  main section
</div>
<footer>
  this is a footer
</footer>

Answer №2

One effective method to adjust the height based on window size is shown below:

// Adjusting height for #main-slider
var windowHeight = $(window).height();
$('#demo').css('height', windowHeight);

$(window).resize(function() {
    'use strict',
    $('#demo').css('height', windowHeight);
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountered a problem when trying to import the function "createToken" into a Node.js middleware

I have developed a model called users in which I included a method named generateToken for generating web tokens. This model is being used with the Sequelize ORM. module.exports = (sequelize, Sequelize) => { const Tutorial = sequelize.define("u ...

javascriptnode.jsexpress

How to create a dynamic background color animation in jQuery similar to a progress bar animation

I have a container with text content (for example: My Name) and it is displayed in a RED background color along with a button. What I am looking for : When the button is clicked, I want to change the background color of the container from RED to BLUE, si ...

jquerycssjquery-uiprogress-barjquery-effects

What rules should be followed in Python when it comes to using nested parentheses in functions?

Currently in the process of deleting my account from this platform, I am intentionally adding unnecessary content to this post. Please refrain from restoring the previous content. - Original Poster ...

javascript

Bootstrap grid columns cannot properly handle overflowing content

Utilizing bootstrap version 5.2.3 I'm facing a challenge not with bootstrap itself, but rather my limited comprehension of the flex system and overflow. Displayed below is a scenario where the first div has a fixed height of 100vh. My goal is to kee ...

htmlcssflexboxoverflowbootstrap-5

Obtaining JSON data using Jquery results in the output of "undefined"

I am struggling to extract the correct values from a JSON document in order to display schedules in list view. Currently, when accessing the JSON document, I keep receiving "undefined" as the result. Below is an example of the JSON document: { "Ferries": ...

jqueryhtmljson

Issue with ForwardRef component in Jest for React Native testing

When attempting to write a test case for my Post Detail screen, I encountered an error that stated: error occurred in the <ForwardRef> component: Here is my test class code: import React from "react"; import { NewPostScreenTemplate } from ...

javascriptreactjsreact-nativejestjsreact-forwardref

Utilizing a background image property within a styled component - Exploring with Typescript and Next.js

How do I implement a `backgroung-image` passed as a `prop` in a styled component on a Typescript/Next.js project? I attempted it in styled.ts type Props = { img?: string } export const Wrapper = styled.div<Props>` width: 300px; height: 300px; ...

javascriptreactjstypescriptnext.js

Fundamental inquiry regarding XMLHttpRequest

Having some difficulty with my JavaScript code calling PHP. Can someone find an error in this code snippet? I'm sure I've used similar code elsewhere on the site... var xmlHttp = createXmlHttpRequestObject(); var favSongArray = []; function cr ...

javascriptajaxxmlhttprequest

Having issues with using the class selector in SVG.select() method of the svg.js library when working with TypeScript

Exploring the capabilities of the svg.js library with typescript has presented some challenges when it comes to utilizing CSS selectors. My goal is to select an SVG element using the select() method with a class selector. In this interactive example, this ...

javascriptangulartypescriptsvg.js

Having difficulty extracting images from a collection - web scraping struggle

I have a basic understanding of web scraping but I am facing an issue. I am using PHP Simple HTML DOM and struggling to extract images from within each 'li' tag. <ul class="slides"> <li> <img src="www.webpage.com/oH7oCOEhQAB ...

phphtmldomweb-scraping

How can one efficiently navigate through extensive functions without risking surpassing the stack limit?

I am currently developing an application in Node.js that requires numerous configuration and database calls to process user data. The problem I am facing is that after reaching 11,800+ function calls, Node throws a RangeError and exits the process. The er ...

javascriptnode.jscouchdbexpress

Understanding how to set the Content-Type in a Post request using Ajax with Node.js

Attempting to send an ajax request without a header in Node.js triggers an error: { [Error: unsupported content-type] status: 415, statusCode: 415 } However, when sending a request with a header, Node.js does not seem to respond. Here is my ajax funct ...

javascriptajaxnode.js

Arrange items in a row in the navigation bar

I am currently working on aligning my navbar items instead of having them stack. After switching from Bootstrap 3 to Bootstrap 4 (beta 2), I noticed that they no longer align properly and remain stacked. Below is the code snippet: <!doctype html> ...

htmlbootstrap-4

What is the best way to divide the Jquery.js file into smaller, separate files?

My web server has a strict file size limit of 64KB and I heavily rely on jQuery for my project. Unfortunately, using any other library like zepto is not an option. The minified size of jQuery alone is 95KB, so I need to split it into two smaller files. C ...

javascriptjquery

Introducing React JSX via a nifty bookmarklet

Looking to convert code found in an HTML file into a bookmarklet? Here's the code snippets involved: <script src="JSXTransformer-0.13.3.js"></script> <script src="react-0.13.3.js"></script> <script type="text/jsx;harmony=tr ...

javascriptreactjsbookmarkletjsx

After applying CSS, I am unable to click on the radio buttons

Even after selecting the other two, it still defaults to the first one. Here is my code: input[type=radio] { display:none; } input[type=radio] + label:before { content: ""; display: inline-block; ...

csshtml

Error encountered while using the Fetch API: SyntaxError - the JSON data contains an unexpected character at the beginning

I've been troubleshooting a contact form and there seems to be an error causing it to malfunction. It's strange because when I switch from Fetch to XMLHttpRequest, the code works fine. With Fetch, if I don't request a response, no errors ar ...

javascriptreactjsfetchphpmailer

JS setTimeout not postponing execution

Attempting to introduce a delay before an AJAX call. var delay = 2000; $("#c_name").on("keyup", function() { var entered = $(this).val(); if (entered.length > 1) { setTimeout(dosearch(entered), delay) } }); Struggling to implement a d ...

javascriptjquerysettimeout

What could be the reason for the content of my navBar not showing up?

Using Bootstrap and additional CSS for styling has been working well, except for the issue with the Dropdown Menu not displaying its content on hover. Within the head tag, the following scripts are included: <!--Jquery--> <script type="text ...

htmljquerycssbootstrap-4drop-down-menu

Retrieving file input control in ASP.NET code-behind

Exploring how to utilize an ASP.Net file upload string within a Server Side onClick event. The ASP.Net file upload control <asp:FileUpload ID="btnFileUpload" runat="server" Width="0px" onchange="this.form.lblUploadStatus.value=GetFileName(this.value); ...

c#javascriptasp.nethtml