I'm working on an image that rotates around a circle. As my image rotates around the circle I would like for it to grow as it rotates. I'm using the example shown in
Circular Motion example
TweenMax.to(['#logo'], 10, {bezier:[
{x:"250px",y:"-40px"},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px"},
{x:"0px",y:"0px"},
],repet:2,ease:Linear.easeNone});
body{
background-color:#fff;
}
#logo{
position:absolute;
left:0;
top:0;
}
.circle{
position:relative;
width:500px;
height:500px;
border:1px solid #000;
border-radius:50%;
margin:0 auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js"></script>
<div class="circle">
<img id="logo" src="http://gravatar.com/avatar/5a224f121f96bd037bf6c1c1e2b686fb?s=80">
</div>
My example is below but it doesn't work
TweenMax.to(['#logo'], 10, {bezier:[
{x:"250px",y:"-40px", scale:0.2},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px", scale:0.8,},
{x:"0px",y:"0px"},
],repet:2,ease:Linear.easeNone});
In order to use the 'bezier' attribute you need to include the morph gsap plugin.
https://greensock.com/docs/Plugins/MorphSVGPlugin
I also found some brackets mistakes and 'repet'.
Keep in mind the [] selector for the element is only necessary when you want to animate more than one different element.
I also think you can't change scale inside the bezier attribute, I also recommend to use the pathDataToBezier in order to get the path, instead of hardcoding it I mean.
Hope it helps, gsap it's lots of fun.
TweenMax.to('#logo', 10, {bezier:{
{x:"250px",y:"-40px"},
{x:"500px",y:"250px"},
{x:"250px",y:"500px"},
{x:"0px",y:"250px"},
{x:"0px",y:"0px"},
}, scale: 0.8, repeat:2,ease:Linear.easeNone});
Related
I'm struggling to find a solution about achieving this particular effect:
The tricky part is that I need the circle and the rectangle to be 2 separate elements because they will contain child nodes.
I've tried various ways, including borders with transparent colors, shape- properties, element positioning trickery etc. Unfortunately, none of my trials yielded even at least approximate results. I just can't seem to be able to wrap my head around this and I can't find any examples on the web as well. The closest I got to was this thread.
Any help would be much appreciated. Thanks!
Using radial-gradient you can easily do this:
.rect {
margin-top:50px;
height:120px;
background:radial-gradient(circle at center,transparent 100px, green 100.5px);
}
.circle {
margin:-150px auto 0;
width:180px;
height:180px;
background:green;
border-radius:50%;
}
html {
background:linear-gradient(to right,pink,white);
height:100%
}
<div class="rect">
</div>
<div class="circle">
</div>
I'm coding my own scrolling social bar but i'm nut sure about method I'm using. As you can see on the pic above, I had put a wider grey div inside the narrower content div. Then I've set grey's one a css to make it's z-index less than the content z-index. It works ok and following content once I scroll the website but my question is - is this a good method to place a bar like this? Maybe there is an easier solution and better for browsers compatibility, isn't it?
Sincerely,
Matt
You can just have the size of the DIV cut down to less space and than make it postion:fixed so that it moves with the scroll.
Fiddle
HTML
<div id='div1' align='center'>
<span id='grey'>Like</span><br>Tweet<br><span id='grey'>Share</span>
</div>
<div id='div2' align='center'>Content</div>
CSS
#div1 {
position:fixed;
top:30px;
left:5px;
background:yellow;
height:60px;
width:50px;
border:4px ridge black;
}
#div2 {
height:800px;
width:200px;
background:orange;
margin-left:60px;
}
#grey {
background:grey;
}
Why don't you position the "like tweet share" div (i guess) relatively to content.
div#content{position:relative;} and div#share{position:absolute;top:...;left:.. }
What I am trying to do is the following.
I have a list of hidden images.
I have a button activated with Jquery onclick that replaces the html of a div to include the images
The button functions as a cycle button and gets a big list of images.
My problem is that the images do not scale to the size of the parent div. Even if I give them a .horizontal and .vertical class
Any ideas?
I want to keep the format of the hidden list of images inside a div because i do some other things with the lists. I originally thought that by having two classes for the images it will work and now that I am finishing I realised that the whole idea has a problem !
http://jsfiddle.net/alexnode/ttQHt/
HTML
<div id="artdiv2">
<div id="artslide1nextbutton">></div>
<div id="artslide1"></div>
</div>
<div class="hidden">
<div id="1slide1">
<img class="horizontal" src="http://farm8.staticflickr.com/7366/9160515864_7dc851a598.jpg" alt="Rezando a los antiguos Dioses - Praying to the old Gods">
</div>
<div id="1slide2">
<img class="vertical" src="http://farm6.staticflickr.com/5519/9158661396_4828a06655.jpg" alt="Drain">
</div>
</div>
Jquery
//i get everything called 1slide like that.
var artslides = $('[id^=1slide]');
idxs1 = 1;
//this is my button that cycles through the image
$("#artslide1nextbutton").on(
"click", function () {
$("#artslide1").html(artslides.eq(idxs1).html());
idxs1 = idxs1 == 1? 0 : idxs1 + 1;
});
CSS
.hidden{display:none;}
#artdiv2{ position:absolute; top:8%; left: 20%; height:70%; width:100%; background:DimGray;}
#artslide1nextbutton{position:fixed; top:0px; left: 0px; height:auto; width:10%; background:DarkRed;pointer:cursor;}
.horizontal {position:relative; width:100%; height:auto;}
.vertical {position:relative; height:100%; width:auto;}
EDIT : answer updated to fit closer to question.:
you could play width min and max value and center img with text-align:center.
demo
http://jsfiddle.net/ttQHt/2/
#artslide1 {
width:100%;
overflow:hidden;
height:100%;
text-align:center;
}
#artslide1 img {
min-height:100%;
max-width:100%;
}
Some other option to play with image
here is an idea of what happens if you can set line-height. http://codepen.io/gcyrillus/pen/BdtEj and adding min-width/min-height http://codepen.io/anon/pen/kfIbp
Use the JQuery variable .height() and .width()
I'm on mobile, so I can't try this myself, but what about putting a width and height attribute directly on the image elements, and using the button to just change the image source? That would make every image have the same width and height.
I am trying to visualize a sort of TV program guide, a line for each channel. The HTML structure is:
<DIV id="channel2_new" class="channel"> // id different for each channel
<IMG src="channel2.png"> // logo source different for each channel
<DIV class=program">
<P style="width:200"> // actual width value reflects program length
<SPAN class="time">06:00</SPAN> // actual time
<SPAN class="title">TG2</SPAN> // actual title
</P>
</DIV>
</DIV>
The CSS is:
.time{
visibility:hidden; width:0px; margin:0px; padding:0px; float:left;
}
.channel{
height:30px; white-space:nowrap; margin:0px; width:1000px; overflow:hidden;
}
.logo{
border:none; float:left; height:20px; margin-top:5px;
}
.program{
position:absolute; left:80px;
}
P{
float:left; border-style:solid; border-width:thin; height:20px; overflow:hidden; margin-top:0px;
}
The idea is to show only the programs that fit within the "channel" width (corresponding to a specified time window, i.e., from 6pm to 10pm). For the programs that start within this window (i.e., at 9pm) but end later (i.e., 11pm), only a partial box should be shown (this is what I hope the "overflow:hidden" attributes should do).
See this example web site to understand better what I'm trying to do: http://it.tv.yahoo.com/
In my case, this happens only in an apparently random way: for some channels it works, for other channels the last "program" rectangle is completely missing (no border, no text). If I change the window width, the same channel that was showing correctly might not be working any more, while others might work!
Do you havee any suggestion?
Thanks.
What you may be looking for is text-overflow: ellipsis; if you apply it to your p like I've done here: http://jsfiddle.net/P8V4e/6/ you get the ellipsis when the text from .title overflows the p element. Is this the behavior you're looking for?
I also added a min-width: 1em; property to the p, that way it won't collapse completely and not show the ellipsis, but will still retain the width of the other elements. I don't know if that will mess up your formatting.
Want to reduce the opacity of page contents container background without reducing the opacity of the contents.
<div id="container">
<div id="page contents">
page contents goes here, like amazing articles and all that.
</div>
</div>
Needs to be able to expand with the content, thus can't have a fixed height.
Absolute positioning it underneath the content will mean there will be no relationship between the two divs and it wont expand with the contents, so I think this is a dead end, feel free to say otherwise.
Can't use Jquery as could be too laggy and not instant. Other options preferred please.
May have to use 'png' background images but were hoping not to as it is a template and needs to be able to change colour based on colour schemes.
Could generate images on demand but not ideal.
Oh and to top it off cant use CSS3 as wont work in IE! of course!
Any suggestions?
My first impulse is a transparent PNG.
But looking further and especially with your comment on variable colour schemes, perhaps hooking into RGBA support would work for you. There's a nice post on it (including how to hack around IE - which doesn't support it at all) here:
http://css-tricks.com/rgba-browser-support/
not tested yet, but you get the idea.
<div id="container">
<div id="page contents">
<div id="opacity"></div>
page contents goes here, like amazing articles and all that.
</div>
</div>
#page {
position:relative;
}
#opacity {
position:absolute; z-index:-1; height:100%; width:100%; background-color:#eee; opacity:.7;
}
All content of an element will receive it's opacity value, even if you set the content's opacity to 0, you'll stile have the problem... here's a simple solution that I use:
HTML
<div id="menu_bg"></div> <!-- BG FOR LEFT MENU -->
<div id="menu_header">
<span class="menu_title2">MENU PRINCIPAL</span>
<div id="menu_opts">
<ul id="menu">
<li id="menu_home">HomePage</li>
<li id="menu_home">Company</li>
</ul>
</div>
</div>
The CSS:
div#menu_bg {
position:fixed; top:10px; left:10px; z-index:20000;
width:200px; height:50px;
background:#000000;
/* for IE */ filter:alpha(opacity=60);
/*CSS3 standard*/ opacity:0.6;
}
div#menu_header {
position:fixed; top:10px; left:10px; z-index:20001;
width:200px; height:50px; overflow:hidden; cursor:pointer;
}
div#menu_opts {
position:absolute; top:60px; left:10px;
width:200px; height:275px; overflow:hidden;
}
The trick is simple, have a div behind you content and use position and z-index to place it. Then draw another div with the content, over the last one, and use same position but set z-index above. This way, you'll have a background with the desired opacity, and your content since it's on another div, will get just right!