scrollHalf

index.html

<div class="scrollHalf">
  
  <div class="scrollHalf__grupo" data-scroll>
    <div class="scrollHalf__grupo__imagen">
      <img src="https://source.unsplash.com/random/800x800" />
    </div>
    <div class="scrollHalf__grupo__contenido">
      <h1>Titulo 1</h1>
      
Betelgeuse
Map of the constellation Orion
Red circle.svg
Betelgeuse (circled) in the constellation Orion
Observation data
Epoch J2000.0      Equinox J2000.0
Constellation	Orion
Pronunciation	/ˈbiːtəldʒuːz, ˈbɛtəl-, -dʒuːs/[1][2]
Right ascension	05h 55m 10.30536s[3]
Declination	+07° 24′ 25.4304″[3]
Characteristics
Evolutionary stage	Red supergiant
Spectral type	M1–M2 Ia–ab[4]
Apparent magnitude (V)	0.50[5] (0.0 - 1.3[6])
Apparent magnitude (J)	−3.00[7]
Apparent magnitude (K)	−4.05[7]
U−B color index	+2.06[5]
B−V color index	+1.85[5]
Variable type	SRc[6]
Astrometry
Radial velocity (Rv)	+21.91[8] km/s
Proper motion (μ)	RA: 26.42 ± 0.25[9] mas/yr
Dec.: 9.60 ± 0.12[9] mas/yr
Parallax (π)	4.51 ± 0.80[9] mas
Distance	222+48
−34[9] pc
Absolute magnitude (MV)	−5.85[10]
Details
Mass	11.6+5.0
−3.9[11] M☉
Radius	887 ± 203[12], 955±217[11] R☉
Luminosity	90000 – 150000[13] L☉
Surface gravity (log g)	−0.5[14] cgs
Temperature	3590[11] K
Metallicity [Fe/H]	+0.05[15] dex
Rotational velocity (v sin i)	5[16] km/s
Age	8.0 – 8.5[12] Myr
Other designations
Betelgeuse, α Ori, 58 Ori, HR 2061, BD+7°1055, HD 39801, FK5 224, HIP 27989, SAO 113271, GC 7451, CCDM J05552+0724AP, AAVSO 0549+07
Database references
SIMBAD	data
Coordinates: Sky map 05h 55m 10.3053s, +07° 24′ 25.426″

    </div>
  </div>
  
  <div class="scrollHalf__grupo kk" data-scroll>
    <div class="scrollHalf__grupo__imagen">
      <img src="https://source.unsplash.com/random/800x950" />
    </div>
    <div class="scrollHalf__grupo__contenido">
      <h1>Titulo 2</h1>
This orange blob shows the nearby star Betelgeuse, as seen by the Atacama Large Millimeter/submillimeter Array (ALMA). This is the first time that ALMA has ever observed the surface of a star and this first attempt has resulted in the highest-resolution image of Betelgeuse available.
Betelgeuse, also designated Alpha Orionis (α Orionis, abbreviated Alpha Ori, α Ori), is on average the ninth-brightest star in the night sky and second-brightest in the constellation of Orion. It is distinctly reddish, and is a semiregular variable star whose apparent magnitude varies between 0.0 and 1.3, the widest range of any first-magnitude star. Betelgeuse is one of three stars that make up the Winter Triangle asterism, and it marks the center of the Winter Hexagon. It would be the brightest star in the night sky if the human eye could view all wavelengths of radiation. fghfghfh fg hgfd
    </div>
  </div>
  
  <div class="scrollHalf__grupo" data-scroll>
    <div class="scrollHalf__grupo__imagen">
      <img src="https://source.unsplash.com/random/800x900" />
    </div>
    <div class="scrollHalf__grupo__contenido">
      <h1>Titulo 3</h1>
Classified as a red supergiant of spectral type M1-2, the star is one of the largest stars visible to the naked eye. If Betelgeuse were at the center of the Solar System, its surface would extend past the asteroid belt, completely engulfing the orbits of Mercury, Venus, Earth, Mars, and possibly Jupiter. However, there are several other red supergiants in the Milky Way that could be larger, such as Mu Cephei, VV Cephei A, and VY Canis Majoris. Calculations of its mass range from slightly under ten to a little over twenty times that of the Sun. It is calculated to be 640 light-years away, yielding an absolute magnitude of about −6. Less than 10 million years old, Betelgeuse has evolved rapidly because of its high mass. Having been ejected from its birthplace in the Orion OB1 Association—which includes the stars in Orion's Belt—this runaway star has been observed moving through the interstellar medium at a speed of 30 km/s, creating a bow shock over four light-years wide. Currently in a late stage of stellar evolution, the supergiant is expected to explode as a supernova within the next million years.

In 1920, Betelgeuse became the first extrasolar star to have the angular size of its photosphere measured. Subsequent studies have reported an angular diameter (apparent size) ranging from 0.042 to 0.056 arcseconds, with the differences ascribed to the non-sphericity, limb darkening, pulsations, and varying appearance at different wavelengths. It is also surrounded by a complex, asymmetric envelope roughly 250 times the size of the star, caused by mass loss from the star itself. The angular diameter of Betelgeuse is only exceeded by R Doradus (and the Sun).
    </div>
  </div> 
  
</div>

script.js

$(document).ready(function($) {

  console.clear();

ScrollOut({
  cssProps: {
    visibleY: true,
    viewportY: true,
    scrollPercentY: true
  },
  threshold:0.2
});
  
});  

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/scroll-out@2.2.2/dist/scroll-out.min.js"></script>

scrollhalf.markdown

scrollHalf

A Pen by elgatodealien on CodePen.

License.

dEMO https://codemyui.com/split-screen-text-and-image-with-load-more-on-scroll/

style.css

* { box-sizing: border-box;}
body { font-size: 30px; padding: 0; margin: 0;}

.scrollHalf { position: relative}
/*.scrollHalf__grupo { opacity: calc(1/(1+(var(--visible-y)*var(--visible-y)*var(--visible-y)*var(--visible-y)))); transition: all 200ms ease-in-out;}*/


.scrollHalf__grupo {  transition: all 200ms ease-in-out; }
.scrollHalf__grupo__imagen { overflow: hidden; }
.scrollHalf__grupo__contenido { padding: 3rem;     }


.scrollHalf__grupo[data-scroll="out"] { opacity: 0;}
.scrollHalf__grupo[data-scroll="in"] { opacity: calc(var(--visible-y)*1.6);  }  


@media screen and (min-width:900px) {
  .scrollHalf__grupo { min-height: 100vh;}
  .scrollHalf__grupo__imagen { position: fixed; top: 0; left: 0; width: 50%;}
  .scrollHalf__grupo__imagen img {  min-height: 100vh;  min-width: 50vw; }
  .scrollHalf__grupo__contenido { margin: 0 1em 0 52%;}
}