I am trying to implement the parallax effect in the website WRT the following link
https://github.com/richardshepherd/Parallax-Scrolling
however
in the website one image(parkview) screen short added, I need to keep stationary so that I can add menu and sub menu in that ,currently its moving like other image .
I tried setting it as a background but the whole background changes.
How can I make it fix??
This is the working code
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Parallax Scrolling Tutorial</title>
<meta name="description" content="How to create a parallax scrolling effect with jQuery, HTML and CSS">
<meta name="author" content="Richard Shepherd, Smashing Magazine">
<!-- Mmmmm, Google Web Fonts. That's a paddlin'. -->
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:700&v2' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="log">
<img src="images/logo.png">
</div>
<div id="main" role="main">
<!-- Section #1 / Intro -->
<section id="first" class="story" data-speed="8" data-type="background">
<div class="smashinglogo" data-type="sprite" data-offsetY="100" data-Xposition="50%" data-speed="-2"></div>
<article>
<img src="images/tutorial-title.png" alt="tutorial-title" width="711" height="242" />
<p>Words and pictures by Richard Shepherd / Twitter: #richardshepherd / Web: richardshepherd.com</p>
<p>GitHub: Fork it here!</p>
</article>
</section>
<script src='js/libs/jquery-1.6.1.min.js'></script>
<script src="js/script.js"></script>
</body>
</html>
You can add position: fixed to it or make another element with background and background-attachment: fixed.
Related
Here's a link to the page so you can check out what's happening when I test the responsiveness: https://flightacademykickz.netlify.app/
The HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ThreeJS Starter</title>
<link href="//db.onlinewebfonts.com/c/04559eae8b7926d003f9f2e036c9e076?family=Blippo" rel="stylesheet" type="text/css"/>
</head>
<body>
<div class="container">
<div class="title-container">
<h1 class="store-title">Flight Academy Kickz</h1>
</div>
<canvas class="webgl"></canvas>
<div class="links">
<h1 class="shop-link">Shop</h1>
</div>
</div>
</body>
</html>
After a quick look at the page's code - just removing the top: 20rem from class="title-container" solved the problem. This was causing the title element overlapping and creating the whitespace at the bottom.
For vertical aligning elements better don't use fixed values on elements. Either use:
top: 50%; transform: translateX(-50%) in a relative container or flexbox to do so. That also secures responsivness.
for some reason I my index.html does not read the style.css. It is linked though. what is the issue ? I added the type, I did add the right path I think.
thank you
<!DOCTYPE html>
<html lang="en">
<head>
<title> </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--Main Start-->
<div class='main'>
<!--Home Section Start-->
<section class='home-section'>
<div class='container'>
< div class ='row'>
<div class='home-text'>
<p> </p>
<h1> </h1>
<h2></h2>
</div>
<div class='home-img'></div>
</div>
</div>
</section>
<!-- Home Section End-->
</div>
<!--Main End-->
<script src="js/script.js"></script>
</body>
</html>
Issue solved, it was that I forgot one root variable.
Just Try :
<html>
<head>
<link rel="stylesheet" href="./style.css">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="font-awesome.css">
<!-- Here Head Content-->
</head>
<body>
<!-- Here Body Content-->
</body>
<html>
But also after you added screenshot for your CSS File you said in previous
answer that it the problem was from the CSS File not the linking (That mean if
there is something wrong with your CSS File the whole file not work)
One possible cause of such problems are browser cache.
If you are on windows, try running ctrl+f5 to reload the page.
Every thing is correct whith you, the only thing that may be wrong is that the css file is not in the same folder with the index, for no reason, also try removing type="text/css",it may work.
I have a code that is supposed to make the columns collapse at the size of 991px but it keeps doing it at 767px, in otherwords I'm specifying that it should collapse when it's less than a medium device but it's only doing it when it's less than a small device, I checked my code many times and I'm confused as to what's going on since I'm following the exact code in my class, here's the code:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Starter Page</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4">Col 1</div>
<div class="col-md-4">Col 2</div>
<div class="col-md-4">Col 3</div>
</div>
</div>
</div>
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/script.js"></script>
</body>
</html>
See it's still treating it as 4 4 4 even though the size is below 991px
And here it finally works at 767px
I need to ask, what is all of the other code. Since the problem is 100% not in the HTML. (Just saying I am just putting this as an answer because I don't have the 50 reputation needed to add a comment on other people's questions.)
So I am developing my first responsive full width image slider in JQuery.
I've been working with JQuery before but never image sliders so I am not sure if its my code that is corrupt or if its the cycle2 that is playing a game with me.
So the issue I am having is that when I open my webpage to see the slider itself its not showing the pictures. I am leaning against the idea of the cycle2 file being outdated or something but I cant know for sure unless someone who uses it alot can confirm it.
To me my code looks perfect, I cant find any issues since it is such a short code.
Here is what my issue looks like http://imgur.com/3QUUbpc
And here is the source code for my file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.js"></script>
<script type="text/javascript src="C:\Users\user\Desktop\Development\Full Width Slider Varga\js\jquery.cycle2.min.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\Untitled.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp.png">
<img src="C:\Users\User\Desktop\Development\Full WIdth Slider Varga\images\wp2.png">
</div>
</body>
</html>
Try this code out:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Full Width Responsive Image Slider</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="http://malsup.github.com/jquery.cycle2.js"></script>
</head>
<body>
<div class="cycle-slideshow">
<img src="images/Untitled.png">
<img src="images/wp.png">
<img src="images/wp2.png">
</div>
</body>
</html>
https://jsfiddle.net/1qjgwz31/
I am trying to use bootstrap scaffold for first time and wonder if I can do that.
<header class="row"></header> // this covers browsers width
<div id="main-container" style="maring:auto; max-width:1200px"> I want this to be centered and not more than 1200px
<div class="row" class="span12" id="main">
</div>
</div>
The idea is that I want to use the scaffolding feature in different areas inside my html document independently, can I do it or I am forced to go on a whole page perspective ?
Well.. the first thing you're going to want is to start with this:
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 101 Template</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
</head>
<body>
<h1>Hello, world!</h1>
<script src="http://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
You do not have to do the entire page, you only put it around whatever you want.
<!-- The container is necessary for your rows -->
<div class="container">
<!-- Each row will hold a row of 'spans' -->
<div class="row">
<!-- This will center whatever content you want. -->
<div class="offset2 span8">
</div>
</div>
</div>