i am trying to add an animation where a logo will slide to the middle then another animation will kick in after that using a delay, but after the first animation it snaps on to the net one after having is as position relative
here is my code:
<h1 class="intro-title">
Hello world
</h1>
<h4 class="scroll-down">Scroll Down</h4>
<div class="arrow">
<i class="fas fa-arrow-down"></i>
</div>
<div id="color1"></div>
<div id="color2"></div>
</div>
<img class="logo" src="logo/logo.png">
<div id="scroll">
<button class="intro-button">Check it out!</button>
</div>
function logoShift() {
$('.logo').css({
transform: 'translateY(-95%)',
right: '90px',
width: '300px',
height: '300px',
position: 'relative'
});
}
Related
I've positioned Vis-network within flex sections.
You can see the full code here: https://codepen.io/MadBoyEvo/pen/XWdgzoB (try moving elements down)
The problem is whenever I try to resize the height of the section manually to '1000px' or whatever value the height of the diagram stays the same. When I push height directly to diagram sections resize properly. But this is problematic when I put something on the right side that expands the main section, and the diagram stays put with the default size. I tried to use autosize for vis.js but it doesn't seem to affect anything.
var options = {
"interaction": {
"hover": true
},
"autoResize": true
};
I tried height/width 100% and it seems it treats min-height as max-height as well.
.diagram {
min-height: 400px;
width: 100%;
height: 100%;
border: 0px solid unset;
}
.vis-network:focus {
outline: none;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel">
<div></div>
</div>
</div>
</div>
</div>
I guess it could be related to position relative/absolute - but if i remove it diagram resize itself automatically slowly which looks very weird.
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
The end goal for me is to have a diagram resize automatically if something on the right side expands, and shrink if it's smaller (min 400px), unless I force the diagram to a static value. Also if I set sections/panels to something bigger I would like diagram to resize itself to match it.
Right now it seems I am fighting flex to position it properly.
On the path from the element with height:1000px to the element containing the diagram, there is a div element which does not propagate the height.
This can be fixed by setting display:flex on that element, see css class fix1 and its corresponding html element in the code below.
The other css class, fix2, shows how you can make the right panel autosize its width (based on the width of its content and a minimum width you choose, 600px in this example) a have the left panel take up the remaining space.
.fix1 {
display: flex;
flex-direction: column;
}
.fix2 {
flex-basis: auto !important;
min-width:600px;
}
<div class="defaultSection overflowHidden">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a name="Diagram - Defaults">Diagram - Defaults </a> <a id="show_192677063" href="javascript:void(0)" onclick="show('192677063'); " style="display:none">(Show)</a><a id="hide_192677063" href="javascript:void(0)" onclick="hide('192677063'); ">(Hide)</a></div>
</div>
<div style="height:1000px" name="192677063" id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="192677063" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="defaultSection overflowHidden fix1">
<div class="defaultSectionHead">
<div class="defaultSectionText"><a> </a> <a id="show_376758632" href="javascript:void(0)" onclick="show('376758632'); " style="display:none">(Show)</a><a id="hide_376758632" href="javascript:void(0)" onclick="hide('376758632'); " style="display:none">(Hide)</a></div>
</div>
<div name="376758632" id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent">
<div id="376758632" class="flexParent flexElement overflowHidden defaultSectionContent collapsable">
<div class="diagram" style="position:relative">
<div class="diagram" style="position:absolute" id="Diagram-02jbghuv"></div>
</div>
</div>
</div>
</div>
<div class="flexPanel overflowHidden defaultPanel fix2">
<div></div>
</div>
</div>
</div>
</div>
You can see the full code here
I'm trying to make something like in this example: Link: ScrollMagic Examples
I can't get it to work. The #pageContent height is only 0 when ScrollMagic.min.js is included.
Picture - Element: #pageContent in inspect
What I have tried:
Using to examples source code
Removing my scripts
//Copied from ScrollMagic Examples
$(function () { // wait for document ready
// init
var controller = new ScrollMagic.Controller();
// define movement of panels
var wipeAnimation = new TimelineMax()
.fromTo("#pageSec1", 1, {x: "-100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("#pageSec2", 1, {x: "100%"}, {x: "0%", ease: Linear.easeNone})
.fromTo("#pageSec3", 1, {y: "-100%"}, {y: "0%", ease: Linear.easeNone});
// create scene to pin and link animation
new ScrollMagic.Scene({
triggerElement: "#pageContent",
triggerHook: "onLeave",
duration: "300%"
}).setPin("#pageContent")
.setTween(wipeAnimation)
.addIndicators()
.addTo(controller);
});
* {
box-sizing: border-box;
font: normal 14px Arial;
}
#pinContainer {
width: 100%;
height: 100%;
overflow: hidden;
}
section {
height: 100%;
width: 100%;
position: absolute;
padding: 15vh 20vw;
background: white;
}
.space {
height: 100vh;
padding: 15vh 20vw;
width: 100%;
border-bottom: 1px solid #000;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="space">Space</div>
<div class="content" id="pageContent">
<section class="section-img" id="pageSec1">
<div class="section-content">
<div class="img-display">
<img src="../img/me.jpg" alt="About Me">
</div>
<div class="info">
<h2>About Me</h2>
<div class="text"></div>
<a class="more" href="about.html">Read More</a>
</div>
</div>
</section>
<section class="section-card" id="pageSec2">
<div class="section-content">
<div class="info">
<h2>My Work</h2>
<a class="more">See All</a>
</div>
<div class="card-content">
<div class="card">
<h4>Company</h4>
<h3>Online Warehouse Status</h3>
<hr>
<div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
<a class="more">Read More</a>
</div>
<div class="card">
<h4>Hobby Project</h4>
<h3>Computer Builder</h3>
<hr>
<div class="text">This is a dashboard program created to see the warehouse stock online. I have also made a user system and a reusable database system.</div>
<a class="more">Read More</a>
</div>
</div>
</div>
</section>
<section class="section-info" id="pageSec3">
<div class="section-content">
<div class="info">
<h2>Contact Me</h2>
<div class="info-box">
<div class="info-boxitem">
<h3>Email</h3>
<h4>email#gmail.com</h4>
</div>
<div class="info-boxitem">
<h3>Phone</h3>
<h4>+45 00 00 00 00</h4>
</div>
</div>
</div>
</div>
</section>
</div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>
I changed the version of the ScrollMagic.js library to 2.0.1 and it started working for me!
I had the exact same problem. It was working fine on most recent Chrome 86 Windows, but not on Chrome 86 macOS. Same for the other browsers I tested.
The solution for me was to have height: 100vh; instead of 100% in #pinContainer.
I have icons over image as shown below.
index.php
<div class="container-fluid" >
<h1 id="service" data-animate="fadeInLeft" data-delay="200">Our Services</h1>
<div class="col-md-12 col-lg-12 col-xs-12 col-sm-12 service_img" id="services_img">
<p class="service_p" id="p" style="padding-bottom: 2px;"></p>
<h1 class="service_head" id="desc"></h1>
<section class="customer-logos slider" style="top: 35%;padding-left: 50px;" id="service_images">
<div class="slide">
<img class="image_service contrast" id="image_service_1" src="images/services_icons/drafting.png" alt="drafting" onclick="desc1()">
<div class="head_service" style="color:white;margin-left: -10px;">Drafting Services</div>
</div>
<div class="slide"><img class="image_service" id="image_service_2" src="images/services_icons/Emerging market penetration.png" alt="Emerging market penetration" onclick="desc2()">
<div class="head_service" style="color:white;margin-left: -15px;">Emerging market<br><span id="penetrate" style="margin-left: 15px;">penetration</span></div>
</div>
<div class="slide"><img class="image_service" id="image_service_3" src="images/services_icons/Engineering analytics.png" alt="Engineering analytics" onclick="desc3()">
<div class="head_service" id="engg_analytics" style="color:white;margin-left: -15px;">Engineering Analytics</div>
</div>
<div class="slide"><img class="image_service" id="image_service_4" src="images/services_icons/Industrial IoT.png" alt="Industrial IoT" onclick="desc4()">
<div class="head_service" style="color:white;margin-left: -5px;">Industrial IoT</div>
</div>
<div class="slide"><img class="image_service" id="image_service_5" src="images/services_icons/Life cycle.png" alt="Life cycle" onclick="desc5()">
<div class="head_service" style="color:white;margin-left: -2px;">Life Cycle</div>
</div>
text.css
.bg-img {
position: relative;
width: 100%;
height: 100%;
background-size: cover;
}
.bg-img:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/*background-image: linear-gradient(to bottom right, #002f4b, #dc4225);*/
opacity: .6;
}
text.js
$('#image_service').click(function() {
$('#image_service').animate({
'marginTop' : "-=30px" //moves up
});
});
I need a solution for this:
When i click on the icon it should be moved to center. I am able to move icon but it is not getting out exactly what i need.
Thank you in Advance!!
A simple jquery code need to be implemented on the icon click.
CSS:
.iconOne { position:relative }
.iconOne.centered { top:-100px; }
jS:
$(".iconOne").click(function(e) {
$(this).addClass("centered");
});
Comment if this is what you want like.
Thanks
I'm fooling around with draggable elements and found myself stuck on the stacking part.
I have three windows that are draggable and when clicked the specific element stacks on top the other two. However the stacking order seem to be "reset" on the other two when a window is clicked. For example if I click on .window1 and .window2 is in the back it ends up on top of .window3.
I'm using javascript with a onmouse z-index property for the stacking. Is there a way to make only the clicked element stack on top without affecting the other two? Any help or pointing in the right direction is welcome, cheers!
HTML:
<div class="window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
My javascript for drag and z-index for stacking:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header" });
$('.window1, .window2, .window3').on('mousedown', function(event) {
$('.window1, .window2, .window3').css('z-index','1');
$( this ).css('z-index','1000');
});
Use the Stack option to bring the current dragged item to the front without affecting the other items:
$( ".window1, .window2, .window3" ).draggable({ handle: ".header", stack: ".window" });
.window1 {
background-color: orange;
width: 100px;
}
.window2 {
background-color: lightgreen;
width: 100px;
}
.window3 {
background-color: yellow;
width: 100px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="window window1">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window2">
<div class="header">header</div>
<div class="content">content</div>
</div>
<div class="window window3">
<div class="header">header</div>
<div class="content">content</div>
</div>
I'm just a graphic design student and I barely know about coding or javascript.
In my website, I have horizontal scroll with a left navigation bar with a fixed position. I want to filter all of my projects in different categories. For example, when I click on "Branding" all the branding projects show up and all the other projects disappear.
I've tried different options and none of them work. When I click on the filter it doesn't do anything.
I don't know if there is a problem with my html or the script. Please help me.
I used and kind of changed the jQuery from this website:
queness.com Below is all of my html and everything.
https://jsfiddle.net/PaulinaPaulino/hbk8z161/
<body>
<nav class="fixed-nav-bar">
<li>
<div id="home">
Paulina Paulino
</div>
</li>
<li>All</li>
<li>Branding</li>
<li>Editorial</li>
<li>Infographics</li>
<li>Photography</li>
<li>Poster</li>
<li>Typography</li>
<li>
<div id="about">
About
</div>
</li>
<li>
<div id="contact">
—paulinapaulino9#gmail.com
<div class="icons">
<a target="_blank" href="https://twitter.com/PaulinaPaulino9"><img src="icons/twitter.png" alt="twitter" style="height:40px;"></a>
<a target="_blank" href="https://www.instagram.com/paulinapaulino/"> <img src="icons/instagram.png" alt="instagram" style="height:40px;"></a>
<a target="_blank" href="https://www.linkedin.com/in/paulina-paulino-94b29490"><img src="icons/linkedIn.png" alt="linkedinprofile" style="height:40px;"></a>
<a target="_blank" href="Resume.pdf"><img src="icons/resume.png" alt="resume" style="height:35px;"></a>
</div>
</div>
</li>
</nav>
<div id="portfoliolist">
<div class="panel" data-cat="photography">
<div class="project1">
<a href="####"><img src="pages/projects/p1-Paint/_MG_8797.jpg" alt="couple-covered-in-paint" style="height:590px;">
<p>Paint</p>
</a>
</div>
</div>
<div class="panel" data-cat="infographics">
<div class="project2">
<a href="###"><img src="pages/projects/p2-Online-Affairs-Infographic/01-front-top.png" alt="infographic" style="height:590px;">
<p>Online Affairs Infographic</p>
</a>
</div>
</div>
<div id="project3" class="panel">
</div>
<div id="project4" class="panel">
</div>
</div>
<script>
$(function() {
var filterList = {
init: function() {
// MixItUp plugin
// http://mixitup.io
$('#portfoliolist').mixitup({
targetSelector: '.panel',
filterSelector: '.filter',
effects: ['fade'],
easing: 'snap',
// call the hover effect
onMixEnd: filterList.hoverEffect()
});
},
hoverEffect: function() {
// Simple parallax effect
$('#portfoliolist .portfolio').hover(
function() {
$(this).find('.label').stop().animate({
bottom: 0
}, 200, 'easeOutQuad');
$(this).find('img').stop().animate({
top: -30
}, 500, 'easeOutQuad');
},
function() {
$(this).find('.label').stop().animate({
bottom: -40
}, 200, 'easeInQuad');
$(this).find('img').stop().animate({
top: 0
}, 300, 'easeOutQuad');
}
);
}
};
// Run the show!
filterList.init();
});
</script>
</body>
I just had to apply everything that this filter jQuery did from the link below.
http://www.newmediacampaigns.com/blog/a-jquery-plugin-to-create-an-interactive-filterable-portfolio-like-ours