We Keep Coding

Animate the position of elements together in a single wrapper or every element separately?

The layout of my simple website is that there are 3 sections below each other with different background and every section have it's own textual content. I want to achieve so called 3D perspective effect, that the content text will throw shadow over the background section and when scrolling, the text will scroll a little bit faster than background.
Now there are thow ways of organizing the code:
First - every section (with background) have it's own content:
<main>
<section class="background-1">
<div class="content-1">Some text and image</div>
</section>
<section class="background-2">
<div class="content-2">Some text and image</div>
</section>
<section class="background-3">
<div class="content-3">Some text and image</div>
</section>
</main>
Second - sections (serving as a background) and text contents (hovering over background) are separated:
<div class="backgrounds">
<div class="background-1"></div>
<div class="background-2"></div>
<div class="background-3"></div>
</div>
<main class="contents">
<section class="content-1">Some text and image</section>
<section class="content-2">Some text and image</section>
<section class="content-3">Some text and image</section>
</main>
The difference is, that in first case, we must animate let's say top property of every content separately and in second case only the .contents wrapper need to be animated.
What is more preferred way, especially considering mobile device performance, then SEO and other stuff?

How can i set my html files with css in reactjs

i need your help.
I have profile page, i researched lots of websites, but i can't found, can you help me?
I need to center all all of the items, and my image has to be like ANGELA YU (image of the top, you can see).
Please help
<div className="asd">
<img alt="123" src={asd}></img>
<div className="top-container">
<div></div>
<div className="user-profile-img">
<img alt="profileImg" src={user.photoURL}></img>
</div>
</div>
<div className="middle-container">
<p>Your email: example#gmail.com</p>
<p>Your user id: 123213213213</p>
<p>Your display name: ASDSADASDSA</p>
</div>
</div>

Try to create a common class .textCenter{text-align:center} and use it in the each parent <div> example <div className="middle-container textCenter"> the all the child elements in this will be aligned center to that <div>.
If you want the name in 2 lines as you shown in the above sample image then you need to give max-width to the name tag example: max-width:'50px'

Just add text-align:center to the classes that you want the text to be centered. Here you can see how to center an image. Just google.

I suggest using flexbox.
You can wrap the content you want to center in a div, and apply this CSS to it :
display:flex;
justify-content:center;
Here is a cool website to learn flexbox.

Angular does not work with custom html attributes

I have an imported css template written on bootstrap, and want to use it inside Angular app.
Seems like exactly custom html attributes don't react a loading from router.
Application characteristics. This is a SPA, and all of pages are loaded inside Navbar Component, with corresponding router-outlet wrapping.
Problem. Any plugin will render included data only after "mechanical" refreshing page with browser "Reload this page" button. But if I change a src for image, from plugin custom attribute, for example
data-background="assets/images/slider_1.jpg"
to
img src="assets/images/slider_1.jpg"
, it will be loaded and shown from the first time.
Example of map plugin. Doesnt show nothing.
<div class="maps-container map-widget m-b-25">
<div class="map" data-addresses="[4.4, -4.4]"
data-icon="assets/images/map-marker.png"
data-zoom="16" data-street-view="1">
</div>
</div>
Example of slider plugin. No background image.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">
<div class="container">
<div class="row">
<div class="col-lg-12">
<h1>This is title</h1>
</div>
</div>
</section>
Example of grid item for blog. Here, it should follow masonry style, but renders like strict grid.
<section class="module-cover parallax text-center"
data-background="assets/images/slider_1.jpg"
data-overlay="0.5">

You better use [attr.data]="name-of-custom-attr"
This way angular manages the use of custom html attributes correctly.

Issue in carousel implementation

I want to implement carousel on my web page.I have created a plunker page for the same.
In that link, i have used CSS3 transformations to create circle effects.
In the above link i have removed the code which i had for carousel implementation because it was not working.Actually what happens is that most of the jquery caosuel available like(elastslide,liquidcarosel,flexslider) etc work only if the img(which needs to be slided) is directly under "li" tag.But in my case, i can't keep img directly under "li" because of the css3 transformations i need.(See index.html page)
http://plnkr.co/edit/PxTtJ2expidIamWUqXLj?p=preview&s=carousel
for eg
<li>
<div class="ch-item">
<div class="ch-info ch-info1" >
</div>
<div class="ch-thumb ch-img-1">
<p class="text"> Java7</p>
</div>
</div>
</li>
Could anyone please suggest how can i implement it.

I want a thumbnail to expand in size as the div does

Hey I'm looking for some help - I'm more of a designer than a coder but I am trying to learn :)
I do have this kinda working but I can't figure out how to get the thumbnail image to resize to the height of the expanded div - as it expands.
I have a container div and inside that div I have multiple "expandable" divs which contain information about different products.
Each of these expandable divs has a title, a thumbnail image and a price of the product (as well as a plus sign image to expand the div itself).
When the div is expanded there is some more information about the product on show.
But when the div is expanded, I would also like the "price" to disappear (as it's now visible in the expanded information) and I would like the image to automatically scale to the height of the expanded div.
So the product information will be on the on the left hand side of the div and the image will be taking up the right half of the div (with the minus button on top of it.
This is my html
<div class="expandingContentContainer">
<div class="expandingContent">
<div id="expandingContentHeader" style="display:inline; float:left">
<h4>Portable navigation system</h4>
</div>
<div id="expandingContentThumb" style="display:inline;">
<img src="images/thumbnails/audio-portable-navigation-thumbs.jpg" />
</div>
<div id="expandingContentPrice" style="display:inline;">
<img src="images/assets/icon_pound.png" />Price: £200
</div>
<div id="expanderSign">
<img src="images/assets/icon_plus.png" />
</div>
<div id="expanderContent" style="display:none">
<p>Bluetooth voice dialling without the hassle of having to train the device. Reads text messages out loud and features a stylish 2,8" colour display. Play back music and phone calls via the OE-audio system.</p>
<p><img src="images/assets/icon_pound.png" />Price: £200</p>
<p><img src="images/assets/icon_tick.png" />Availability: Most models<img src="images/assets/icon_hash.png" />Part Number: 3600-78-474<img src="images/assets/icon_pencil.png" />Legal: N/A</p>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$("#expanderSign").click(function(){
$("#expanderContent").slideToggle();
if ($("#expanderSign").text() == "+"){
$("#expanderSign").name("−")
}
else {
$("#expanderSign").text("+")
}
});
});
</script>

Sounds like something you could solve entirely with CSS. As long as the container-div has a fixed height, you should be able to set the height of the img-element to height: 100%, causing the image to scale accordingly. However, this will not work while the display-mode of the container is set to display: inline. You will have to use display: inline-block to be able to set the height of the div.

In order to get a good help you should add a link to your website or the css files.
You will need some changes in the css and maybe (depending on the support you need) some javascript (jquery or zepto).
You could also use a pre build library but it's really not necessary.