How can I use a transparent PNG image instead of clipping the svg.
Please help need a transparent PNG image instead of circle.
CodePen link
Here is the Javascript
var section = document.querySelector('section');
window.addEventListener('scroll', function(){
var value = window.scrollY;
section.style.clipPath = "circle("+ value +"px at center)"
})
Thanks!
If I understood the problem correctly,
you need to change CSS section like background: url(/yourlink);
It can be through specifying height width and giving border-radius to the image .
And value change on scroll
var section = document.querySelector('section');
window.addEventListener('scroll', function(){
var value = window.scrollY;
section.style.height = value +"px"
section.style.width = value +"px"
})
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, "sans-serif";
}
section {
position: fixed;
top: 0;
left: 0;
/*width: 100%;
height: 100vh;*/
background: url(https://www.prixgen.com/wp-content/uploads/2018/04/mission.jpg);
background-size: contain;
background-attachment: fixed;
border-radius:500px;
}
.container {
position: relative;
margin-top: 200vh;
background: #fff;
padding: 100px;
}
.container h2 {
font-size: 2.5em;
}
.title {
position: relative;
top: 250px;
z-index: 1;
font-size: 2em;
text-align: center;
width: 100%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Join us</title>
</head>
<body>
<h2 class="title">Join us for Better Future</h2>
<section></section>
<div class="container">
</div>
</body>
</html>
Related
I have a small issue related to CSS and JS.
Here you can see the page with the issue:
http://127.0.0.1:5500/scroll-progress-bar/dist/index.html
On the right side, you can see there is a scroll bar with a percentage that has the color: blue.
What I want is when this scroll bar is passing through the black section to change its color to 'white'.
I have assigned a CSS class "black" to this section.
Here is my CSS, JS, and HTML Code.
$(document).scroll(function (e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
// For scrollbar 1
$(".scrollBar1").css("width", scrollPercent + "%");
$(".scrollBar1 span").text(roundScroll);
// For scrollbar 2
$(".scrollBar2").css("height", scrollPercent + "%");
$(".scrollBar2 span").text(roundScroll);
});
:root {
--timing: ease;
}
.scrollBar2 {
position: fixed;
top: 0;
right: 2vw;
height: 0%;
width: 10px;
background: #49e;
transition: height 200ms var(--timing);
text-align: right;
color: #49e;
display: flex;
align-items: center;
border-radius: 1em;
}
.scrollBar2 span {
position: absolute;
bottom: 3px;
left: 2px;
font-size: 0.7em;
font-weight: 500;
display: inline-block;
text-align: left;
transform: rotate(-90deg);
transform-origin: bottom left;
}
.scrollBar2 span::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
.black {
color: black;
background: black;
width: 100%;
height: 100vh;
}
.red {
color: red;
background: red;
width: 100%;
height: 100vh;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Scroll Progress Bar</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"
/>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="scrollBar2"><span></span></div>
<div class="red">panel1</div>
<div class="black">panel1</div>
<!-- Presentation stuff -->
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
Basically, I want when the scrollBar2 is passing through the div with class "black", the scrollBar2 to have a white color along with the percentage and the number:
I hope someone can help me!
Thank you!
You could try mix-blend-mode.
It would need some thought to get the color you currently have on the initial phases of the vertical bar though.
This snippet just makes the bar and text white, then specifies mix-bend-mode difference as it flows over the red portion.
$(document).scroll(function(e) {
var scrollAmount = $(window).scrollTop();
var documentHeight = $(document).height();
var windowHeight = $(window).height();
var scrollPercent = (scrollAmount / (documentHeight - windowHeight)) * 100;
var roundScroll = Math.round(scrollPercent);
// For scrollbar 1
$(".scrollBar1").css("width", scrollPercent + "%");
$(".scrollBar1 span").text(roundScroll);
// For scrollbar 2
$(".scrollBar2").css("height", scrollPercent + "%");
$(".scrollBar2 span").text(roundScroll);
});
:root {
--timing: ease;
}
.scrollBar2 {
position: fixed;
top: 0;
right: 2vw;
height: 0%;
width: 10px;
background: #49e;
transition: height 200ms var(--timing);
text-align: right;
color: #49e;
display: flex;
align-items: center;
border-radius: 1em;
color: white;
background: white;
}
.scrollBar2 span {
position: absolute;
bottom: 3px;
left: 2px;
font-size: 0.7em;
font-weight: 500;
display: inline-block;
text-align: left;
transform: rotate(-90deg);
transform-origin: bottom left;
}
.scrollBar2 span::after {
content: "%";
font-size: 0.8em;
position: absolute;
right: -15px;
bottom: 4px;
font-weight: 700;
opacity: 0.4;
}
.black {
color: black;
background: black;
width: 100%;
height: 100vh;
}
.red {
color: red;
background: red;
width: 100%;
height: 100vh;
mix-blend-mode: difference;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>CodePen - Scroll Progress Bar</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css" />
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<div class="scrollBar2"><span></span></div>
<div class="red">panel1</div>
<div class="black">panel1</div>
<!-- Presentation stuff -->
<!-- partial -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="./script.js"></script>
</body>
</html>
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="NWC.css">
<meta charset="utf-8">
<!--Font Import Links-->
<link href="https://fonts.googleapis.com/css2?family=Josefin+Sans:wght#700&display=swap" rel="stylesheet">
<!---JS File Imports-->
<script src="NWC.js">
</script>
<!--HTML Code Starts Below-->
</head>
<body>
<section>
<div class="header">
<div class="logo_container">
<h1>N W C</h1>
</div>
</div>
</section>
<!--Cover Section-->
<section>
<div class="coverpic">
<img src="file:///C:/Users/jakes/Desktop/NWC/nwcgfrey.png" alt="NWC LOGO" width="60%" height="40%">
</div>
</section>
<!--About Section-->
<section>
<div class="about-section">
<h1>About NWC</h1>
<p>New World Coding is a startup teaching kids to program. Coding is an essential skill to learn because it is our future. All of our technology today whether it's using a computer to making a pot of coffee is run by the code engineers write. Here at NWC, we have group lessons for you and a friend, or 1:1 lessons! For more information about NWC, our lessons, or any other questions, please fill click the button below.</p>
</div>
</section>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
}
body {
background-image: url(file:///C:/Users/jakes/nwcWebsitecity.png);
background-size: cover;
}
.header {
display: block;
background-color: #1E1E1E;
background-size: 1000px;
width: 100%;
height: 80px;
}
/*
.inner_header {
width: 1000px;
height: 100%;
display: table-cell;
margin: 0 auto;
}
*/
.logo_container {
height: 100%;
display: table;
float: left;
}
.logo_container h1{
color: white;
height: 100%;
display: table-cell;
vertical-align: middle;
font-family: 'Josefin Sans', sans-serif;
padding-left: 10px;
}
.coverpic {
bottom: 750px;
vertical-align: middle;
text-align: center;
display: table-cell;
}
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: fixed;
color: white;
font-family: 'Josefin Sans', sans-serif;
color: white;
text-align: center;
transform: rotate(180);
}
[What site looks like now, I just want to move the body section lower1
Basically, I want the text body to move down lower so that you don't see it when you first load into the site, I want the .coverpic to be centered when you first load into the site and when you start scrolling you see the about section.
U can use margine-top in css.
which text u want to lower just write in css margine-top: and how px u want.
Like example
h1 {
margine-top: 50%;}
to be in the middle screen or just lower or more high % to make it in the right position
Add a class to your text (p tag):
<p class= "sample">
and then adjust the margin in your CSS:
.sample {
margin-top: 50px;
}
adjust the margin-top accordingly for how low you want the text to go.
edit: change the "color" in your about-section to black for example. Basically you have white on white right now.
You'll also notice that I added margin-top: 50px on both about-section and sample classes. The first margin-top brings the title down and the second brings the text down.
.about-section {
background-image:
url(file:///C:/Users/jakes/nwcWebsitecity.png);
height: auto;
width: 100%;
position: relative;
font-family: 'Josefin Sans', sans-serif;
color: black;
text-align: center;
transform: rotate(180);
margin-top: 50px;
}
.sample {
margin-top: 50px;
};
I have looked through various pages, but have not managed to find a working solution. I want the text in my div to get more transparent gradually when I scroll. Please, can anybody help? Here is my code:
<script src = "/js/titleScroll.js"></script>
<div class = "header-title">
<h1>Title</h1>
</div>
and:
$(document).ready(function() {
$(window).scroll(function() {
if ($(this).scrollTop() > 0) {
$('header-title').css('opacity', 0.8);
} else {
$('header-title').css('opacity', 1);
}
});
});
and here is my css:
.header-title {
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
position: relative;
max-width: 100%;
background-attachment: fixed;
position: float;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
Thank you.
Problem is, currently you are just triggering 0.8 opacity when user is not at top of the page. Try to get top offset each time scroll is executed and then apply opacity based on that offset, it can be linear function, or more complex ones - it's up to you how it's gonna fade in/out.
Here's very quick working example:
<head>
<style>
body {
min-height: 4000px;
}
.header-title {
position: fixed;
width: 80%;
height: 100px;
left: 50%;
top: 50%;
font-size: 1.5em;
text-align: center;
transform: translateX(-50%);
margin-top: -50px;
max-width: 100%;
background-attachment: fixed;
}
.header-title h1 {
color: white;
text-shadow: 2px 2px 4px #d1d1d1;
font-family: arial, sans-serif;
white-space: nowrap;
text-transform: uppercase;
display: inline-block;
}
</style>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<script>
$(document).ready(function() {
$(window).scroll(function(event) {
let scroll = $(this).scrollTop();
let opacity = 1 - (scroll / 1000);
if (opacity >= 0) {
$('.header-title').css('opacity', opacity);
}
});
});
</script>
<div class = "header-title">
<h1>Title</h1>
</div>
</body>
https://jsfiddle.net/un2bdvfm/
I need something like this. http://jsfiddle.net/2fAxv/1/
But the second div #hideshould be on the top left of the screen with some margin. Can't figure that out. Also, once the image is clicked on the youtube video shrinks to a default size.Is there a way to fix it's size in the same code without using <iframe>
html
<div class="vid">
<img id="hide" src="http://img.youtube.com/vi/Z7JgY9zezj4/hqdefault.jpg" data-video="https://www.youtube.com/embed/Z7JgY9zezj4?autoplay=1" />
<div id="hide1">
<h3>johnny Depp<br><span>Acting Technique</span></h3>
</div>
</div>
css
.vid {
width: 350px;
height: 298px;
float: left;
margin: 20px 25px 70px 70px;
background-size: cover;
background-position: 0px -50px;
background-repeat: none;
}
.vid div {
overflow: hidden;
height: 298px;
width: 300px;
background-color: rgba(255, 255, 255, 0.32);
}
.vid div h3 {
position: absolute;
color: black;
font-family: 'Montserrat', sans-serif;
font-size: 30px;
font-weight: bold;
padding: 10px;
background-color: rgba(255,255,255,0.8);
margin-left: 30px;
max-width: 450px;
}
.vid div h3 span {
color: black;
text-align: center;
width: 300px;
font-family: 'Source Sans Pro', sans-serif;
font-style: italic;
font-weight: 400;
font-size: 19px;
}
function
$('#hide').click(function() {
video = '<iframe src="' + $(this).attr('data-video') + '"></iframe>';
$(this).replaceWith(video);
$('#hide1').hide();
});
As to the sizing problem, I'd suggest:
$('img').click(function () {
// creating an <iframe> element:
var video = $('<iframe />', {
// setting its properties,
// this.dataset.video returns the
// value of the 'data-video' attribute:
'src': this.dataset.video,
// retrieves the height/width:
'height': this.clientHeight,
'width': this.clientWidth
});
$(this).replaceWith(video);
});
JS Fiddle demo.
The positioning can be solved, depending on where you want the element to be positioned, by simply using position: absolute on the element to position (the #hide1 element, with position: relative on the parent .vid element):
.vid {
/* other (unchanged) styles omitted for brevity */
position: relative;
}
.vid div {
/* other (unchanged) styles removed for brevity */
position: absolute;
top: 10%;
left: 10%;
}
/* some minor changes follow,
just for tidying up/aesthetics;
but irrelevant to the 'positioning'
aspect */
JS Fiddle demo.
References:
CSS:
position.
JavaScript:
Element.clientWidth.
Element.clientHeight.
HTMLElement.dataset.
jQuery:
click().
replaceWith().
Hey so I'm working on this website and I learned how to do this thing with the Navbar so the color fades in, I can't get any of the links to work after it starts to work. From what I understand it has to do with e.preventDefault(), but I'm not sure how to fix this.
here is my code
$(window).scroll(function() {
// 100 = The point you would like to fade the nav in.
if ($(window).scrollTop() > 100 ){
$('.bg').stop().animate({
opacity : 0.5
}, 10 );
} else {
$('.bg').stop().animate({
opacity : 0.0
}, 200 );
};
});
$('.scroll').on('click', function(e){
e.preventDefault()
$('html, body,').animate({
scrollTop : $(this.hash).offset().top
}, 1500);
});
/****NAV*****/
body{
background-color: #000;
font-family: 'Trebuchet Ms';
}
.container {
width: 100%;
height: 2000px;
position: relative;
/* font-family: 'Trebuchet Ms';*/
}
.bg {
background: #777;
width: 100%;
height: 100px;
opacity: 1;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 1;
}
ul {
height: 100px;
margin: -70px auto 0 auto;
width: 500px;
}
li {
float: left;
list-style: none;
margin: 10px 20px;
text-transform: uppercase;
/* letter-spacing: 0px;*/
color: wheat;
}
li a {
/* height: 100px;*/
text-transform: uppercase;
color: wheat;
font-family: 'Trebuchet Ms';
font-size:
}
/*
a {
text-align: center;
font-size: 50px;
color: #bdbdbd;
font-weight: bold;
text-decoration: none;
letter-spacing: 5px;
text-shadow: 1px 1px 1px #949494;
position: relative;
z-index: 1;
margin: 0 auto;
display: block;
}
a:hover {
color: #a6a6a6;
text-shadow: 1px 1px 1px #C9C9C9;
}
*/
a {
border-style: none;
}
a:link {
text-decoration: none;
}
a:hover {
color:wheat;
}
a:active {
color: #2c9d91;
text-decoration: inherit;
}
.down {
top: 150px;
}
.up {
top: 1800px;
}
/*******OVERLAY*******/
#writingoverlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
opacity: .5;
/* background: radial-gradient( coral, gray, darkslategray);*/
/* background: radial-gradien( coral,darkslategray, gray);*/
/* background: radial-gradient(darkslategray 35%, dimgray, gray);*/
background: radial-gradient(lightgray, gray, dimgray);
color: crimson
}
/*
#video-overlay {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
background: linear-gradient(to bottom left, crimson, coral);
opacity: 0.2;
}
*/
/*****VIDEO FULL SCREEN*****/
video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
/*****FOOTER******/
footer {
color: wheat;
text-align: center;
font-size: 20px;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="styles.css">
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script src="main.js"></script>
</head>
<body>
<div id="top" class="container">
<div class="fixed">
<div class="bg"></div>
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>
</div>
<footer>Contact info.</footer>
<div id="writingoverlay"></div>
<!-- <div id="video-overlay"></div> -->
<div class="vidOverlay">
<video id="video" autoplay controls loop muted>
<source src="/Img/8.mp4" type="video/mp4">
<source src="/Img/8.webm" type="video/webm">
</video>
</div>
</body>
</html>
This is actually not related to your e.preventDefault, it's related to your opacity animation. Basically, you are bringing an opacity tag to the div which is covering your link. If you want to test this, you can run your entire code and just use a different animation instead of opacity, such as
height: '150px'
You can also see this effect if you just edit the css style tag to remove opacity in the developer console.
I think if you change this logic to use navbar instead of bg, you will get it to work. I believe the problem is that you have a div covering another div, so you can't click the div underneath.
This works for me, but obviously you'll have to change your css to match what you need:
if ($(window).scrollTop() > 100 ){
$('.navBar').stop().animate({
opacity : 0.5
}, 10);
} else {
$('.navBar').stop().animate({
opacity : 0.0
}, 200 );
};
i think your missed a /, try to put /index.html , the / is for your to redirect your path.
<ul class="navBar">
<li>home
</li>
<li>photography
</li>
<li>film
</li>
<li>contact
</li>
</ul>
</div>